如何使用CSS使屏幕充满整个高度？

Question

如何使用CSS使屏幕充满整个高度？

htmlcssruby-on-railstwitter-bootstrapfullscreen

3

抱歉，我对HTML-CSS非常陌生。我使用Twitter Bootstrap框架开发了一个标准的Rails应用程序。如下面的片段所示(application.html.erb)，我像往常一样组织页面: 页头容器页脚

现在我希望每个页面都能适应屏幕的高度(如果内容较短，则达到屏幕高度的100%，如所附的截图所示)。实际上，如您所见，我在屏幕底部有一个灰色区域，而我想要一个填满整个屏幕的宽页面...

我认为这是一些CSS配置，但我尝试了一些CSS设置没有成功。有什么建议吗？

谢谢！ 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>

scrrenshot

- Giorgio Robino

我猜测图片问题是页脚没有完全落到页面底部。我的理解正确吗？ - Cam

可能是一个CSS布局的重复，最小高度为100。 - Mateusz

这个？http://www.cssstickyfooter.com/ - Scott Simpson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ralph.m · Accepted Answer

如果您只想让布局延伸到浏览器的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>