Making a div fit the initial screen
If I understand correctly (there's some room for confusion here):
http://jsfiddle.net/zRpNp/
#screenFiller {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 15px solid orange
}
You might be after the position: fixed
version: http://jsfiddle.net/zRpNp/1/
How to make div contents take up entire screen on mobile?
use vw (total width screen available) and vh (total height screen avaiable) and use it as width and height in body.
body {
margin:0px;
width:100vw;
height:100vh;
overflow:auto;
}
Then add viewport meta in your <head>
to scale the screen pixel correctly
<meta name="viewport" content="width=device-width, initial-scale=1">
How to make a div cover the whole screen
You could use viewport height as your height value:
.main { height: 100vh; background-color: green;}
<div class="main"> CONTENT</div>
HTML/CSS Fit Div to Contents unless screen is small
Use CSS Media queries to setup for various screen sizes.
view source code of this page to see how media queries were used.
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>
Related Topics
Overlap Border of Parent with H2 Margin Negative
Chrome Not Respecting Rem Font Size on Body Tag
Twitter Bootstrap Tabs Not Working: When I Click on Them Nothing Happens
How to Make a Div 100% of Window Height
Cordova List All Files from Application Directory (Www)
Chrome Slow Scrolling with Fixed Position Elements
Show My Location on Google Maps API V3
Automatic Retina Images for Web Sites
Remove HTML Scrollbars But Allow Mousewheel Scrolling
How to Render Svg Elements with Crisp Edges While Still Keeping Anti-Aliasing
How to Add a Title to a HTML Select Tag
Why Can't I Use a Heading Tag Inside a P Tag and Style It with CSS
Get Url and Save It | Chrome Extension