I want to create a div which fits the browser window, but has content underneath which is visible when scrolling.
I don't want the div to be fixed, but I want it to be the same size as the browser window, and when re-sizing.
I'm sure the solution is very simple, but my mind has gone blank.
Below is what I'd like it to look like.
你可以简单地通过设置height: 100%
但也要记住关于设置html，body到100%和你的 div 的所有父母。
例如，如果您有：
<body>
<div id="wrapper">
<div id="height100"></div>
</div>
<div id="content"></div>
您的 CSS 应如下所示：
html, body, #wrapper, #height100 {
height: 100%;
}
<div class='viewport'>
<ul>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
</ul>
<div class='belowviewport'>Content</div>
<div>
body { margin: 0;}
.viewport{
position:absolute;
width:100%;
height:100%;
background: blue;
}
.belowviewport {
position:absolute;
width:100%;
top:100%;
height: 50px;
}
html, body{
height : 100%;
width : 100%;
margin : 0
}
#content{
height : 100%;
width : 100%;
}
-1对我的问题。因为这不是一个新的要求。在询问之前谷歌一次。
干得好。我认为这就是你所追求的：http: //jsfiddle.net/NDrSm/
html, body {
height: 100%;
overflow: hidden;
}
div.container {
height: 100%;
overflow: auto;
background: red;
}
您可以使用一个简单的 jQuery 解决方案：
function calc() {
var $window = $(window),
$nav = $('nav'),
$content = $('#content');
$content.height($window.height() - $nav.height());
}
PS：您实际上可以通过 css 为内容 div 定义最小高度。
如果您打算使用纯 JavaScript，这里有一个解决方案：
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
w.onload = calc();
w.onresize = calc();
function calc() {
var nav = d.getElementById('nav'),
content = d.getElementById('content');
content.style.height = (getWindowHeight() - nav.clientHeight) + 'px';
}
function getWindowHeight() {
return w.innerHeight|| e.clientHeight|| g.clientHeight;
}