Page 1
Page 2
All geek questions in one place

Make the full screen mode of the current screen

I have five sections:

<section id="one">Page 1</section> <section id="two">Page 2</section> <section id="three">Page 3</section> <section id="four">Page 4</section> <section id="five">Page 5</section>

And I want to make each of them in full screen mode of the current screen (I have a 1920/1080 screen, the other has 1024/768, etc.)

I have css code as follows:

 section { display: block; background: #CFF; height:2000px; padding: 60px; padding-left: 120px; }

when I do height growth from 2000 to 100%, the result: enter image description here

any idea how i can solve this problem?

JSFIDDLE

EDIT

I found a good article about this. see here if someone needs it

+5
source share
5 answers

You need to implicitly set the size of the document ( body ) for the parameters in the viewer ( html ), and then set the height and width of 100% for each section, which are then calculated relative to this.

Change your CSS to body and section to:

Demo script

 html, body { margin: 0; height:100%; width:100%; padding:0; } section { display: block; background: #CFF; height:100%; width:100%; padding: 60px; padding-left: 120px; box-sizing:border-box; }

By adding box-sizing:border-box; in CSS for section , each section will support 100% width, including the added addition.

Note

You can also view percentages> , namely: vh and vw (viewport height) and (screen width) to cause the content to stretch to fill the proportional size of the viewport, where 100 = 100%. This is probably the preferred solution with implicit% units, depending on the required browser support and does not require the element to be nested in the parent with an explicit height / width setting

+10
source

Just use:

 section { height:100vh; width: 100vw; }

No need to set the height and width properties for the <body> and <html> tags.

+3
source

Set the height on the body and the html elements to 100%, then use the height: 100% for sections.

 html, body { height:100%; }

JsFiddle example

+1
source

You need to set the height of the document in the size of the browser window before you can give it the height in percent:

 body, html { margin: 0; height:100% }

Then just give the sections a height of 100%:

 section { display: block; background: #CFF; height:100%; padding: 60px; padding-left: 120px; }

JSFiddle Demo

+1
source

This is not too difficult to do.

What you need to do is give the height of the body and html . I changed the following CSS:

 html { height: 100%; position: relative; } body { margin: 0; height: 100%; position: relative; } section { display: block; background: #CFF; height:100%; padding: 60px; padding-left: 120px; }

You can see how this works in the following jsfiddle

+1
source

Source: https://habr.com/ru/post/1200028/

More articles:


All Articles