+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+
Contents of (1) as shown above are unknown, as it may increase or decrease in dynamically generated pages. The second div (2) as shown above, should fill the remaining space.
here is an example of my html
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>
css...
#full{width: 300px; background-color: red;}
#someid{height: 100%;}
Or is this method wrong? How should I do this? please see my demo and show me my mistake.
I added this for pages that were too short.
html:
<section id="secondary-foot"></section>
css:
section#secondary-foot {
height: 100%;
background-color: #000000;
position: fixed;
width: 100%;
}
I know this is an old question, but nowadays there is a super easy form to do that, which is CCS Grid, so let me put the divs as example:
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
then the CSS code:
.full{
width:/*the width you need*/;
height:/*the height you need*/;
display:grid;
grid-template-rows: minmax(100px,auto) 1fr;
}
And that's it, the second row, scilicet, the someide, will take the rest of the height because of the property 1fr, and the first div will have a min of 100px and a max of whatever it requires.
I must say CSS has advanced a lot to make easier programmers lives.
html,_x000D_
body {_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.parent {_x000D_
display: flex;_x000D_
flex-flow:column;_x000D_
height: 100%;_x000D_
background: white;_x000D_
}_x000D_
_x000D_
.child-top {_x000D_
flex: 0 1 auto;_x000D_
background: pink;_x000D_
}_x000D_
_x000D_
.child-bottom {_x000D_
flex: 1 1 auto;_x000D_
background: green;_x000D_
} <div class="parent">_x000D_
<div class="child-top">_x000D_
This child has just a bit of content_x000D_
</div>_x000D_
<div class="child-bottom">_x000D_
And this one fills the rest_x000D_
</div>_x000D_
</div>Create a div, which contains both divs (full and someid) and set the height of that div to the following:
height: 100vh;
The height of the containing divs (full and someid) should be set to "auto". That's all.
To get a div to 100% height on a page, you will need to set each object on the hierarchy above the div to 100% as well. for instance:
html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }
Although I cannot fully understand your question, I'm assuming this is what you mean.
This is the example I am working from:
<html style="height:100%">
<body style="height:100%">
<div style="height:100%; width: 300px;">
<div style="height:100%; background:blue;">
</div>
</div>
</body>
</html>
Style is just a replacement for the CSS which I haven't externalised.
I know this is a late entry but even in 2016 I am surprised by the complete lack of IE support for flex (currently 11 is the only one to support it and its majorly buggy at that http://caniuse.com/#feat=flexbox) which from a business perspective is not great! So I think until IE is shut down the best solution and most cross-browser friendly one surely must be a JS/Jquery one?
Most sites already use Jquery and a very simple example (for my code) is:
$('#auto_height_item').height($(window).height() - $('#header').height());
You can obviously replace window and header and let the basic math do the work. Personally I'm still not convinced about flex yet...
This can be done with tables:
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="0%"><td>
<div id="full">
<!--contents of 1 -->
</div>
</td></tr>
<tr><td>
<div id="someid">
<!--contents of 2 -->
</div>
</td></tr>
</table>
Then apply css to make someid fill the remaining space:
#someid {
height: 100%;
}
Now, I can just hear the angry shouts from the crowd, "Oh noes, he's using tables! Feed him to the lions!" Please hear me out.
Unlike the accepted answer which accomplishes nothing aside from making the container div the full height of the page, this solution makes div #2 fill the remaining space as requested in the question. If you need that second div to fill the full height allotted to it, this is currently the only way to do it.
But feel free to prove me wrong, of course! CSS is always better.
Source: Stackoverflow.com