这个问题在这里已有答案：
我对CSS比较陌生。我正在尝试使用HTML和CSS创建正常的页面布局，但我遇到了一个问题。这是我的HTML。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery</title>
<link rel="stylesheet" type="text/css" href="../css/StyleSheet1.css">
<script type="text/javascript" src="../javascript/jQuery.js""></script>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>
这是我的CSS脚本
html,body
{
padding: 0px;
margin: 0px;
color: #555;
font-size: 20px;
font-family: "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
height: 100%;
}
.container
{
height: 100%;
background-color: Green;
position: relative;
}
.header
{
height: 300px;
width: 100%;
background-color: Red;
}
.content
{
width: 100%;
background-color: Black;
}
.footer
{
height: 500px;
width: 100%;
background-color: Violet;
position: absolute;
bottom: 0px;
}
我正在尝试创建页眉，页脚和内容div。但我的内容div应该自动改变它的高度。如果内容div中没有任何内容，那么我的页面应至少具有内容高度等于（页面高度 - （页眉高度+页脚高度））。
把位置换成亲戚怎么样？我摆弄了一下：
.footer
{
height: 500px;
width: 100%;
background-color: green;
position: relative;
bottom: 0px;
}
JsFiddle example。看到它并告诉我这就是你想要的。
你可以在这里看看Ryan Fait的“粘性页脚”：http://ryanfait.com/sticky-footer/
它完全符合您的描述（即页脚总是至少在页面底部，即使内容div不够长）。
它确实要求您对标记进行一些小改动。你最终会得到
<body>
<div class="container">
<div class="header"></div>
<!-- this is where you put your content -->
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
而不是你已经拥有的。 “推”div是空内div，当内容不够长以填充页面时，它会填满空格。
编辑：我用我想到的解决方案创建了a fiddle。正如我所说，我稍微改变了你的标记，但希望这对你来说不是问题。
我还使页眉和页脚更小，只是为了让它更容易在jsfiddle上玩。
您正在使用height: 100%;，您无法使用％try设置高度：min-height:450px;这将做的是设置最小高度并在内容增加时增加
您可以使用以下CSS实现此目的：
html,body {
padding: 0px;
margin: 0px;
color: #555;
font-size: 20px;
font-family: "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
height: 100%;
}
.container {
height: 100%;
background-color: Green;
position: relative;
}
.header {
position: relative;
height: 150px;
width: 100%;
background-color: Red;
z-index: 1; /* higher than z-index of content */
}
.content {
width: 100%;
position: relative;
top: -150px; /* - height of header */
padding-top: 150px; /* + height of header */
margin-bottom: -350px; /* - (height of header + height of footer) */
padding-bottom: 200px; /* height of footer */
height: auto;
min-height: 100%;
box-sizing: border-box;
z-index:0; /* lower than z-index of header */
background-color: Black;
}
.footer {
height: 200px;
width: 100%;
background-color: Violet;
position: relative;
bottom: 0px;
}
请看这里的长篇内容：http://jsfiddle.net/EeCk9/
并且没有内容：http://jsfiddle.net/EeCk9/1/