100％屏幕高度的CSS
我有一个头元素和一个内容元素：
#header #content 我希望头部的高度是固定的，内容填充屏幕上剩余的所有高度，使用overflow-y: scroll; 。
这可能没有Javascript？ 谢谢。
这个技巧是指定height: 100%; 关于html和body元素。 一些浏览器查找父元素（ html ， body ）来计算高度。
<html> <body> <div id="Header"> </div> <div id="Content"> </div> </body> </html> html, body { height: 100%; } #Header { width: 960px; height: 150px; } #Content { height: 100%; width: 960px; }
忘记所有的答案，这行CSS在2秒内为我工作：
height:100vh;
1vh =浏览器屏幕高度的1％
资源
正如评论中提到的那样，在2011年问题被提出时，并非所有的浏览器都支持视口单元。 其他答案是当时的解决scheme
其实最好的办法是这样的：
html { height:100%; } body { min-height:100%; }
这为我解决了一切，它可以帮助我控制页脚，无论页面是否向下滚动，它都可以有固定的页脚。
技术解决scheme – 编辑
从历史上看，“高度”是一个棘手的问题，而“宽度”是最简单的。 由于CSS重点<body>为样式工作。 上面的代码 – 我们给了<html>和<body>一个高度。 这是魔法进入的地方 – 因为我们在桌面上有“最小高度”，所以我们告诉浏览器<body>优于<html>因为<body>保存最小高度。 这反过来，允许<body>覆盖<html>因为<html>高度已经早些。 换句话说，我们正在欺骗浏览器将表格“撞”到<html>以外，所以我们可以独立devise风格。
有了HTML5，你可以这样做：
CSS：
body, html{ width:100%; height:100%; padding: 0; margin: 0;} header{ width:100%; height: 70px; } section{ width: 100%; height: calc(100% - 70px);}
HTML：
<header>blabablalba </header> <section> Content </section>
接受的解决scheme实际上不会工作。 您会注意到内容div将等于其父， body的高度。 因此，将身高设置为100%将设置为等于浏览器窗口的高度。 假设浏览器窗口的高度为768px ，通过将内容div高度设置为100% ， div的高度将为768px 。 因此，你将最终的头部div为150px ，内容div为768px 。 最后，您将拥有比页面底部低150px的内容。 有关其他解决scheme，请查看此链接。
您也可以设置父级display: inline 。 参见http://codepen.io/tommymarshall/pen/cECyH
一定也有HTML和身体的高度设置为100％。
除非你需要支持IE 9及以下版本，否则我会使用flexbox
body { display: flex; flex-direction: column; } .header { height: 70px; } .content { flex: 1 1 0 }
您还需要获取正文以填充整个页面
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
CSS PLaY | 跨浏览器固定页眉/页脚/居中单列布局
CSS框架，版本2：示例2，指定宽度| 456 Berea Street
一个重要的事情是，虽然这听起来很简单，但是会有相当多的丑陋的代码进入你的CSS文件来获得这样的效果。 不幸的是，它确实是唯一的select。
你有没有尝试过这样的事情？
CSS：
.content { height: 100%; display: block; }
HTML：
<div class=".content"> <!-- Content goes here --> </div>
到目前为止，我发现的最佳解决scheme是在页面底部设置页脚元素，然后评估页脚的偏移量和我们需要展开的元素之间的差异。 例如
该html文件
<div id="contents"></div> <div id="footer"></div>
css文件
#footer { position: fixed; bottom: 0; width: 100%; }
js文件（使用jquery）
var contents = $('#contents'); var footer = $('#footer'); contents.css('height', (footer.offset().top - contents.offset().top) + 'px');
您可能还想更新每个窗口上的内容元素的高度大小，所以…
$(window).on('resize', function() { contents.css('height', (footer.offset().top -contents.offset().top) + 'px'); });
