Html 如何适应屏幕全高（使用CSS）？_Html_Css_Ruby On Rails_Twitter Bootstrap_Fullscreen

Html 如何适应屏幕全高（使用CSS）？

html css ruby-on-rails twitter-bootstrap

Html 如何适应屏幕全高（使用CSS）？,html,css,ruby-on-rails,twitter-bootstrap,fullscreen,Html,Css,Ruby On Rails,Twitter Bootstrap,Fullscreen,很抱歉，我对html css一无所知。我使用twitter引导框架开发了一个标准Rails应用程序。如下面的代码段（application.html.erb）所示，我像往常一样整理网页标题容器页脚现在，我希望每一页都能适应屏幕的高度（如果内容较短，就达到屏幕高度的100%，就像附加的scrrenshot一样）事实上，正如你在scrrenshot中看到的，我在屏幕的下半部分有一个灰色区域，相反，我想要一个充满整个屏幕的页面我认为这是一些CSS配置，但我尝试了一些CSS设置，但没有

很抱歉，我对html css一无所知。我使用twitter引导框架开发了一个标准Rails应用程序。如下面的代码段（application.html.erb）所示，我像往常一样整理网页标题容器页脚

现在，我希望每一页都能适应屏幕的高度（如果内容较短，就达到屏幕高度的100%，就像附加的scrrenshot一样）

事实上，正如你在scrrenshot中看到的，我在屏幕的下半部分有一个灰色区域，相反，我想要一个充满整个屏幕的页面

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

谢谢！乔治


伊萨米解剖

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


html，正文{高度：100%；}
#外{
最小高度：100%；
}
*html#outer{height:100%；}/*用于IE 6，如果您愿意的话*/
正文，p{margin:0；padding:0}
内容在这里

如果希望页脚始终固定在屏幕底部（假设没有足够的内容将其进一步向下推），可以使用以下方法：

<!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>


html，正文{高度：100%；边距：0；填充：0；}
*仅限html#外部{/*ie6及以下版本*/
身高：100%；
}
.包装纸{
最小高度：100%；
裕度：-240px自动0；
}
.content{padding top:240px；}
.页脚{
高度：240px；背景：#F16924；
}
满足于此

我认为图像的问题在于页脚不会一直落到页面底部。我说的对吗？这可能是重复的吗？谢谢你，拉尔夫！我希望页脚留在屏幕的底部。以后我试试你的代码！好的，祝你好运。您可以根据需要更改240px值，但不要修改太多。将所有内容保留在包装器div中，但页脚内容除外。这里的限制是需要在页脚上设置高度。

<!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>