如何适应屏幕全高(使用CSS)？
Gio*_*ino 3 html css ruby-on-rails fullscreen twitter-bootstrap
对于我在html-css中的极度无知感到抱歉.我使用twitter bootstrap框架开发了一个标准的Rails应用程序.如下面的代码段(application.html.erb)所示,我像往常一样组织页面,如标题容器页脚
现在我希望每个页面都能适应屏幕的高度(如果内容较短,则达到屏幕高度的100%,如附加scrrenshot的情况).
事实上,正如你在scrrenshot中看到的那样,我在屏幕的下半部分有一个灰色的区域,而我想要一个填满整个屏幕的页面......
我认为这是一些CSS配置,但我尝试了一些CSS设置但没有成功.有什么建议吗？
谢谢!乔治
<!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>
如果您只想将布局扩展到浏览器的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>
如果你希望你的页脚始终粘在屏幕的底部(假设没有足够的内容将其推下来),你可以使用这样的东西:
<!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>
| 归档时间： |
|
| 查看次数： |
39516 次 |
| 最近记录： |