Make DIV max-height equal to `window height - 100px`
Yes:
#specificElement {
height: calc(100vh - 100px);
box-sizing: border-box;
}
This uses the CSS calc()
function to subtract 100px
from 100vh
(1vh
being one percent of the view-port's height) and uses the result as the value of the height
property.
The box-sizing
forces the browser to include padding
, and border
s, in the calculated height
of the element.
Obviously use a relevant selector for your use-case.
References:
calc()
.- CSS lengths.
How to make a div max height equal to the screen height?
Complete solution by my friend:
http://jsfiddle.net/yanhaifa/zhrmxd23/28/
html, body {
height:100%;
margin:0;
}
.ss, .scroll, .footer {
box-sizing: border-box;
}
.ss {
display:flex;
flex-direction: column;
max-height: 100%;
border: 1px solid #ddd;
}
.header {
flex: 0 0 auto;
}
.scroll{
flex: 1 1 auto;
position: relative;
overflow-y: auto; /* add overflow on y-axis so it add the scroll bar */
}
.footer {
flex: 0 0 auto;
margin:0;
border: 1px solid orange;
padding:10px;
}
How to specify max-height css property to Screen size
Scroll bar appears only when content is overflown
.
If max-height
of your inner div is equal to the height of its container, scroll bar will never appear. if you want to see scroll bar use this.
.scrollDiv {
height:auto;
max-height:150%;
overflow:auto;
}
Make a div fill the height of the remaining screen space
2015 update: the flexbox approach
There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.
Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.
(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.
To check current support you can also see here:
http://caniuse.com/#feat=flexbox
Working example
With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.
html,body { height: 100%; margin: 0;}
.box { display: flex; flex-flow: column; height: 100%;}
.box .row { border: 1px dotted grey;}
.box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */}
.box .row.content { flex: 1 1 auto;}
.box .row.footer { flex: 0 1 40px;}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box"> <div class="row header"> <p><b>header</b> <br /> <br />(sized to content)</p> </div> <div class="row content"> <p> <b>content</b> (fills remaining space) </p> </div> <div class="row footer"> <p><b>footer</b> (fixed height)</p> </div></div>
Div height equal to another div max-height
Using Javascript, you could do something like:
document.getElementById("two").style.height = document.getElementById("one").clientHeight;
How to force child div to be 100% of parent div's height without specifying parent's height?
NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721
I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.
Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.
Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.
Related Topics
CSS Table Border Spacing Inside Only
Div with Margin-Left and Width:100% Overflowing on The Right Side
Twitter Bootstrap - Nav Bar Issues in Internet Explorer
Firefox Not Recognizing a Font
Angular: Updating Scope on Hover
How to Do Horizontal Scroll in Ionic 3
How to Get The CSS Counter Value of The Parent
Web Safe Font Weights - How to Get Thinner
Gooey CSS Effects with Contrast Parent
Position: Relative Appearing Over Position:Absolute
Body { Font-Size: 100.01%; } Vs Body { Font-Size: 100%; }
How to Use HTML5 Now to Create a Website
Left/Right Float Button Inside Div
Using Cors Headers with CSS Background-Image
Using CSS Variables as SASS Function Arguments