Best IT Recipes

100% css screen height

I have a title element and content element:

#header #content

I want the title to have a fixed height, and the content to fill in all the remaining height available on the screen with overflow-y: scroll; .

Is this possible without Javascript? Thank.

+99
html css
09 Sep '11 at 6:19 06:19
source share
10 answers

The trick with this indicates height: 100%; on html and body elements. Some browsers look at parent elements ( html , body ) to calculate height.

 <html> <body> <div id="Header"> </div> <div id="Content"> </div> </body> </html> html, body { height: 100%; } #Header { width: 960px; height: 150px; } #Content { height: 100%; width: 960px; }
+78
Sep 09 '11 at 6:32
source share

Forget all the answers, this CSS line worked for me in 2 seconds:

 height:100vh;

1vh = 1% of browser height

source

[updated April 2017] , as mentioned in the comments, back in 2011, when the question was asked, not all browsers supported viewing units. Other answers were solutions then.

+275
Apr 12 '16 at 10:30
source share

Actually the best approach is this:

 html { height:100%; } body { min-height:100%; }

This solves everything for me, and it helps me control my footer, and it can have a fixed footer no matter if the page scrolls.

Technical Solution - EDITED

Historically, "height" is a complex thing that can be distinguished, compared with the "width", the simplest. Since css focuses on <body> for styling to work. Code above - we gave <html> and <body> height. This is where the magic comes in - since we have a "minimum height" on the game table, we tell the browser that <body> superior to <html> because <body> holds the minimum height. This, in turn, allows <body> override <html> because <html> had a height already. In other words, we trick the "bump" <html> browser off the table, so we can create the style ourselves.

+32
Jan 19 '13 at 1:32
source share

The decision made does not really work. You will notice that the contents of the div will be equal to the height of its parent, body . Therefore, setting the body height to 100% will be equal to the height of the browser window. Let's say the browser window was 768px in height, setting the content div height to 100% , the div height would be 768px . So you end up with a div header of 150px and the content of the div will be 768px . You will end up with 150px content at the bottom of the bottom of the page. For another solution, this link.

+8
Sep 20
source share

With HTML5 you can do this:

CSS

 body, html{ width:100%; height:100%; padding: 0; margin: 0;} header{ width:100%; height: 70px; } section{ width: 100%; height: calc(100% - 70px);}

HTML:

 <header>blabablalba </header> <section> Content </section>
+6
Apr 21 '14 at 15:53
source share

You can also set the display: inline parent element. See http://codepen.io/tommymarshall/pen/cECyH

Make sure html and body height is also set to 100%.

+1
May 05 '14 at 18:22
source share

CSS PLaY | cross browser with fixed header / footer / centered single column layout

CSS Frames, Version 2: Example 2, Specified Width | 456 Berea Street

One important thing is that although it sounds simple, there will be quite a lot of ugly code in your CSS file to get this effect. Unfortunately, this is the only option.

0
Sep 09 '11 at 6:25
source share

If you do not need support for IE 9 and below, I would use flexbox

 body { display: flex; flex-direction: column; } .header { height: 70px; } .content { flex: 1 1 0 }

You also need to get a body to fill the whole page.

 body, html{ width:100%; height:100%; padding: 0; margin: 0;}
0
May 31 '16 at 15:25
source share

The best solution I have found so far is to set the footer element at the bottom of the page, and then evaluate the difference in the offset of the footer and the element that we need to expand. eg.

Html file

 <div id="contents"></div> <div id="footer"></div>

Css file

 #footer { position: fixed; bottom: 0; width: 100%; }

Js file (using jquery)

 var contents = $('#contents'); var footer = $('#footer'); contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

You may also need to update the height of the content element each time the window is resized, so ...

 $(window).on('resize', function() { contents.css('height', (footer.offset().top -contents.offset().top) + 'px'); });
-one
Sep 28 '15 at 15:18
source share

Have you tried something like this?

CSS

 .content { height: 100%; display: block; }

HTML:

 <div class=".content"> <!-- Content goes here --> </div>
-3
Sep 09 2018-11-11T00:
source share


More articles:


All Articles