<分区>
我对 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 中没有任何内容，那么我的页面的内容高度至少应等于(页面高度 - (页眉高度 + 页脚高度))。