Html 如何适应屏幕全高（使用 CSS）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16465418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to fit screen full height (using CSS)?
提问by Giorgio Robino
sorry for my extreme-ignorance in html-css. I developed a standard Rails application using twitter bootstrap framework. As shown in the snippet below (application.html.erb), I have pages organized as usual like header container footer
抱歉我对 html-css 的极度无知。我使用 twitter bootstrap 框架开发了一个标准的 Rails 应用程序。如下面的代码段所示 (application.html.erb)，我像往常一样组织页面，如页眉容器页脚
Now I would like that every page could fit the height of the screen (reaching 100% of the screen height in case content is shorter, as in the case of attached scrrenshot).
现在我希望每个页面都可以适合屏幕的高度（在内容较短的情况下达到屏幕高度的 100%，如附加屏幕截图的情况）。
indeed, as you see in the scrrenshot, I have a grey area in the lower part of screen, instead I would like a with page that fill the entire screen...
事实上，正如你在屏幕截图中看到的，我在屏幕的下部有一个灰色区域，相反，我想要一个充满整个屏幕的页面......
I presume it's some CSS configuration, but I tryied some CSS setting without success. Any suggestion ?
我认为这是一些 CSS 配置，但我尝试了一些 CSS 设置但没有成功。有什么建议吗？
thanks! giorgio
谢谢！乔治
<!DOCTYPE html> <html> <head>
<title>Esami Anatomia</title>
<%= render 'layouts/responsive' %>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %> </head> <body> <%= render 'layouts/header' %>
<div class="container-flow">
<%= render 'layouts/flashes' %>
<%= yield %>
<div class="layout-filler"> </div>
</div> <%= render 'layouts/footer' %> </body> </html>
回答by ralph.m
If you just want your layout to stretch to 100% height of the browser, you can use this basic setup:
如果您只想将布局拉伸到浏览器的 100% 高度，您可以使用以下基本设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body{height:100%;}
#outer{
min-height:100%;
}
* html #outer{height:100%;} /* for IE 6, if you care */
body, p { margin:0; padding:0}
</style>
</head>
<body>
<div id="outer">
<p>content goes here</p>
</div>
</body>
</html>
If you want your footer always stuck to the bottom of the screen (assuming there's not enough content to push it further down), you can use something like this:
如果您希望页脚始终卡在屏幕底部（假设没有足够的内容将其进一步向下推），您可以使用以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">content here</div>
<!-- end wrapper --></div>
<div class="footer"></div>
</body>
</html>
