Full screen enterance-CodePudding

I am trying to figure out how to make a first screen appearance that goes full screen. The whole page would be full screen and when someone scrolls down, it scrolls to a new screen. I can't exactly figure out how to do this.

body {
  margin: 0 0 0 0;
}

#sample_img_1 {
  height: 900px;
  width: absolute;
  background-image: linear-gradient(to right, green, blue);
}

#sample_img_2 {
  height: 200px;
  width: absolute;
  background-image: linear-gradient(to right, red, orange);
}

<p id="sample_img_1"></p>
<p id="sample_img_2"></p>

CodePudding user response：

First, the problems with your existing code:

body {
  /* this is absolutely fine: */
  margin: 0 0 0 0;
  /* but could easily be replaced by the more concise:
    margin: 0;
  */
}

#sample_img_1 {
  height: 900px;
  /* this is a valid property ("width") with an invalid property-value,
     "absolute" is valid only for the "position" property; the "width"
     property requires a valid CSS length: */
  width: absolute;
  background-image: linear-gradient(to right, green, blue);
}

#sample_img_2 {
  height: 200px;
  /* as above, this is an invalid property-value: */
  width: absolute;
  background-image: linear-gradient(to right, red, orange);
}

/* as mentioned in the HTML, this rule could have reduced repetition:

  p {
    height: 200px;
    width: 500px; (or any other valid value)
  }

*/

<!-- while the HTML is perfectly valid, it seems sensible to point out
     that identifying all elements with an "id" attribute is rarely
     necessary, but that rarity depends on your understanding of CSS
     and the requirements of your use-case; but in this case you could
     have simplified your CSS, and minified repetition, by declaring
     width and height rules on a style rule applied to all <p> elements:-->
<p id="sample_img_1"></p>
<p id="sample_img_2"></p>

To correct the above, to have the background-images of the <p> elements take the full width of the page:

body {
  /* here I've specified zero padding and zero margin: */
  padding: 0;
  margin: 0;
}

p {
  /* removed the default margin from the <p> elements: */
  margin: 0;
  width: 100%;
}

#sample_img_1 {
  /* I left the "height" as you defined them, but I'm not sure
     why they have these heights: */
  height: 900px;
  background-image: linear-gradient(to right, green, blue);
}

#sample_img_2 {
  height: 200px;
  background-image: linear-gradient(to right, red, orange);
}

<p id="sample_img_1"></p>
<p id="sample_img_2"></p>

Though in place of the above, I'd suggest the following approach, with explanatory comments in the code:

/* a simple reset to all elements, as well as the
   ::before and ::after pseudo-elements: */
*,
::before,
::after {
  /* forcing the browser to calculate element-sizes
     including their assigned padding and borders: */
  box-sizing: border-box;
  /* removing default margin and padding: */
  margin: 0;
  padding: 0;
}

html,
body {
  /* both of the following are to have the <html> and <body>
     elements take up the full size available to them;
     block-size, a CSS logical property equivalent to the
     axis on which element blocks are laid out (vertical,
     in English and languages derived from Latin): */
  block-size: 100%;
  /* inline-size, a CSS logical property equivalent to the
     axis on which inline content is laid out (horizontal,
     in English and languages derived from Latin): */
  inline-size: 100%;
  /* here we enforce scroll-snapping on the y axis: */
  scroll-snap-type: y mandatory;
}

body {
  /* defining a CSS counter that is reset by the <body>: */
  counter-reset: sectionCount;
}

section {
  /* defining the background-image of the <section> elements, using
     the var() function along with two CSS custom properties: */
  background-image: linear-gradient(to right, var(--gradientColor1), var(--gradientColor2));
  /* here we use display: grid purely to take advantage of the
     following 'place-content' rule to center the pseudo-element
     within its parent: */
  display: grid;
  place-content: center;
  /* using logical properties to set the size of the element(s) on the
     block and inline axes, using viewport-height (vh) and viewport-width
     (vw) units to have them take the full height and width of the viewport: */
  block-size: 100vh;
  inline-size: 100vw;
  /* defining the snapping point of the element: */
  scroll-snap-align: start;
}

/* this is irrelevent to the demo, but is used to number the <section>
   elements: */
section::before {
  /* defining a border in the current-color: */
  border: 3px solid currentColor;
  color: #fff;
  /* incrementing the named CSS counter: */
  counter-increment: sectionCount;
  /* setting the content of the pseudo-element, using the CSS counter()
     function, formatting that counter with decimal-leading-zero: */
  content: counter(sectionCount, decimal-leading-zero);
  font-size: 6em;
  padding: 1em;
}

/* defining the CSS custom properties that are applied in the
   background-image property: */
.page:nth-child(odd) {
  --gradientColor1: green;
  --gradientColor2: blue;
}

.page:nth-child(even) {
  --gradientColor1: red;
  --gradientColor2: orange;
}

<!-- I've changed your posted CSS, and removed the 'id' properties
     entirely; this is to allow easier addition/removal of content;
     the choice to switch to <section> instead of <p> was made to
     more logically/semantically group associated content; but the
     elements are largely irrelevant and require only that the
     CSS for sizing (and scrolling if required) is applied to the
     elements you prefer to use: -->
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<section ></section>

JS Fiddle demo.

References:

Bibliography:

"Practical CSS Scroll Snapping," by Max Kohler on CSS-Tricks.com.

CodePudding user response：

Make the height of each section 100vh;

body {
  margin: 0;
}

#sample_img_1 {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to right, green, blue);
}

#sample_img_2 {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to right, red, orange);
}

And then follow this stackoverflow thread;

On scroll down, scroll 100vh to the bottom

CodePudding user response：

You could look into using the vw and vh CSS units. They stand for viewport width and viewport height. I've used them in some instances where I want an element to be sized relative to the device's screen size. For instance:

CSS

.full-width {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: pink;
}

edit: here's a link to learn more on W3schools