How can an html element fill out 100% of the remaining screen height, using css only?

后端未结

关注

 17  1687

I have a header element and a content element:

#header
#content

I want the header to be of fixed height and the content to fill up all the

相关标签:

17条回答

-上瘾入骨i

2020-12-22 16:51
Actually the best approach is this:
```
html { 
    height:100%;
}
body { 
    min-height:100%;
}
```
This solves everything for me and it helps me to control my footer and it can have the fixed footer no matter if page is being scrolled down.

Technical Solution - EDITED

Historically, 'height' is tricky thing to mold with, compared to 'width', the easiest. Since css focus on <body> for styling to work. The code above - we gave <html> and <body> a height. This is where magic comes into picture - since we have 'min-height' on playing table, we are telling browser that <body> is superior over <html> because <body> holds the min-height. This in turn, allows <body> to override <html> because <html> had height already earlier. In other words, we are tricking browser to "bump" <html> off the table, so we could style independently.
0 讨论(0)
发布评论:

提交评论
- 加载中...
北海茫月

2020-12-22 16:51
For me, the next worked well:

I wrapped the header and the content on a div
```
<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>
```
I used this reference to fill the height with flexbox. The CSS goes like this:
```
.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}
```
For more info about the flexbox technique, visit the reference
0 讨论(0)
发布评论:

提交评论
- 加载中...
广开言路

2020-12-22 16:52
The accepted answer does not work. And the highest voted answer does not answer the actual question. With a fixed pixel height header, and a filler in the remaining display of the browser, and scroll for owerflow. Here is a solution that actually works, using absolute positioning. I also assume that the height of the header is known, by the sound of "fixed header" in the question. I use 150px as an example here:

HTML:
```
<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>
```
CSS:(adding background-color for visual effect only)
```
#Header
{
    height: 150px;
    width: 100%;
    background-color: #ffffd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}
```
For a more detailed look how this works, with actual content inside the #Content, have a look at this jsfiddle, using bootstrap rows and columns.
0 讨论(0)
发布评论:

提交评论
- 加载中...
[愿得一人]

2020-12-22 16:55
You can use vh on the min-height property.
```
min-height: 100vh;
```
You can do as follows, depending on how you are using the margins...
```
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
忘了有多久

2020-12-22 16:55

The accepted solution will not actually work. You will notice that the content div will be equal to the height of its parent, body. So setting the body height to 100% will set it equal to the height of the browser window. Let's say the browser window was 768px in height, by setting the content div height to 100%, the div's height will in turn be 768px. Thus, you will end up with the header div being 150px and the content div being 768px. In the end you will have content 150px below the bottom of the page. For another solution, check out this link.

0 讨论(0)
发布评论:

提交评论
- 加载中...

抹茶落季

2020-12-22 16:55

Please let me add my 5 cents here and offer a classical solution:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>

This will work in all browsers, no script, no flex. Open snippet in full page mode and resize browser: desired proportions are preserved even in fullscreen mode.

Note:

Elements with different background color can actually cover each other. Here I used solid border to ensure that elements are placed correctly.
idHeader.height and idContent.top are adjusted to include border, and should have the same value if border is not used. Otherwise elements will pull out of the viewport, since calculated width does not include border, margin and/or padding.
left:0; right:0; can be replaced by width:100% for the same reason, if no border used.
Testing in separate page (not as a snippet) does not require any html/body adjustment.
In IE6 and earlier versions we must add padding-top and/or padding-bottom attributes to #idOuter element.

To complete my answer, here is the footer layout:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

And here is the layout with both header and footer:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

0 讨论(0)

1 2 3 下一页