我最近进入网络开发，我开始通过创建自己的网站来测试我的能力。我遇到了一个问题。我的网站结构有一个位置：固定标题，它将始终保持原样。因此，我必须在我的文本容器中包含位置：relative。
我遇到的问题是页脚字面意思是在文本容器中。我希望页脚位于内容的底部*（因此，页脚）但我无法这样做。
到目前为止，这是我的代码：
（HTML）
<html>
<head>
<title>bigbeno37's test page</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="header">
<h1 class="headertext">
bigbeno37's site
</h1>
<ul class="menu">
<li><a href="#">Contact me</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About me</a></li>
<li class="currentitem"><a href="#">Home</a></li>
</ul>
</div>
<div class="container">
<div class="bodytext">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquet tincidunt libero vitae pellentesque. Pellentesque auctor eros sed nibh hendrerit vulputate. Aliquam vitae tellus purus. Suspendisse eleifend tellus eu tincidunt imperdiet. Duis ut eros nec justo ultricies sollicitudin. Proin gravida lacinia nisi, nec porta neque tincidunt in. Nullam feugiat ultricies eros ac viverra. Aenean in congue magna. Cras fermentum adipiscing congue. Ut laoreet eros non dolor iaculis vestibulum. Cras ultrices, ante non consequat blandit, turpis sapien lacinia dui, eu posuere diam dolor quis velit. Vivamus leo erat, adipiscing at lectus id, gravida feugiat elit. Morbi sit amet rhoncus nisi, vehicula varius ipsum. Pellentesque eget tincidunt orci.<br /><br />
Donec viverra tincidunt sodales. Cras pulvinar bibendum malesuada. Fusce erat tortor, hendrerit et eros non, faucibus mollis magna. Phasellus ultrices elit non libero congue, tincidunt ultrices tellus elementum. Suspendisse vel augue eu risus auctor volutpat. Vivamus congue, lacus in iaculis sagittis, lectus turpis dictum ipsum, varius aliquet lectus massa eget tortor. Aenean at tellus non tellus placerat porttitor sit amet vel purus.<br /><br />
Pellentesque venenatis molestie ultrices. Aliquam vitae purus justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel leo nulla. Etiam dignissim nisl enim, vulputate pretium felis placerat et. Curabitur eleifend porttitor aliquam. Pellentesque in volutpat quam. Integer sed mauris eu purus tincidunt pharetra vel ac metus. Fusce eget ante nec tortor scelerisque pretium vitae ac enim. In quis ultrices sapien, at imperdiet orci. Ut neque nunc, lacinia non nisi eget, facilisis accumsan ante. Nullam vel ligula leo.<br /><br />
Phasellus dictum dolor in interdum aliquet. Nulla posuere quam ac molestie mattis. Pellentesque laoreet a magna at porta. In a laoreet tellus, ac porttitor lectus. Suspendisse nec diam in quam volutpat fermentum. Maecenas semper tincidunt quam eu dictum. Maecenas tincidunt convallis vehicula. Mauris at nibh id neque lacinia porta et dignissim urna. Nulla pharetra eu lorem vel molestie. Nunc pretium quam ac egestas commodo. Nulla tempor sapien eu est rhoncus sagittis. Phasellus non luctus nisl. Morbi elementum dui tincidunt metus aliquet, eu tincidunt felis sagittis. Nullam fringilla congue tortor, imperdiet rhoncus quam hendrerit at. Curabitur mattis tortor eget commodo scelerisque.<br /><br />
Suspendisse quis arcu vulputate, aliquam enim quis, fermentum massa. Sed libero nulla, cursus vel odio non, congue gravida purus. Aenean posuere dapibus augue, at posuere dui posuere sed. Morbi sed risus erat. Sed pulvinar, lacus id pellentesque pretium, orci felis elementum justo, at malesuada leo nulla ac quam. Praesent vitae risus eros. Duis ac dapibus dui. Sed viverra porttitor dui, in iaculis lectus posuere eu. Pellentesque sed dignissim arcu. Aenean lacus erat, euismod eu elementum a, vehicula interdum mi. Nam blandit hendrerit dolor ut pharetra. Pellentesque orci turpis, convallis et placerat ut, tincidunt eu urna. Morbi aliquet, eros vel commodo ultrices, odio est vehicula risus, id elementum tellus erat nec diam. Nulla aliquet consectetur porttitor. Etiam blandit accumsan sapien at molestie.<br /><br />
Maecenas bibendum auctor leo eget cursus. Aliquam consectetur est bibendum imperdiet euismod. Duis bibendum vestibulum turpis. Vivamus rutrum mi vel interdum interdum. Vestibulum mollis lectus tortor. Curabitur lorem sapien, sollicitudin a orci sed, vulputate cursus dolor. Etiam lacinia tristique enim, a viverra lacus aliquet eu. Vivamus et ullamcorper massa. Phasellus molestie orci augue, vitae suscipit tellus ornare quis. Sed diam mauris, feugiat ac magna id, feugiat consequat orci. Nullam et dapibus risus. In luctus libero sit amet fermentum elementum. Proin lectus justo, eleifend et varius ac, volutpat consequat nunc.<br /><br />
Vivamus faucibus pretium felis, a scelerisque nisi aliquam quis. Nulla facilisis, diam quis tempus blandit, mauris nulla luctus neque, bibendum convallis lorem elit et tellus. Vestibulum a sollicitudin ligula, nec ultricies odio. Vivamus quis lobortis massa, scelerisque vestibulum velit. Nunc vitae bibendum risus, eu dignissim ipsum. Nunc non lorem ut dolor fermentum vulputate. In egestas mi at justo sodales bibendum. Cras pellentesque, metus vitae posuere feugiat, dui tortor molestie sem, in fringilla magna est vitae felis. Sed dapibus ut massa et rhoncus. Integer mattis venenatis aliquam. In hac habitasse platea dictumst.<br /><br />
Donec ut purus posuere, volutpat ipsum et, cursus tortor. Proin sed suscipit arcu, at dapibus sapien. Duis scelerisque metus non orci feugiat, ac auctor velit laoreet. Etiam id metus bibendum, mollis eros sed, facilisis dui. Duis at lectus ultrices, scelerisque nunc sed, dictum enim. Etiam malesuada justo at orci tincidunt, in varius augue tempor. Nulla fringilla aliquam ipsum, in venenatis turpis fringilla ut. In facilisis ac metus eu condimentum. Proin ac sapien ac orci placerat sollicitudin. Donec tristique lobortis interdum. Curabitur vel tellus ac lacus dictum scelerisque sit amet at mauris.<br /><br />
Maecenas rhoncus suscipit ante sit amet dapibus. Vivamus eu enim in ante scelerisque ultricies id ac magna. Nam in mattis ante. In scelerisque tincidunt nisl et feugiat. Duis interdum metus pharetra metus fringilla, sit amet ultrices urna malesuada. Mauris a sollicitudin massa. Pellentesque sed tristique orci. Cras massa mauris, ornare at elit at, porta elementum elit. Proin mollis diam sed mattis iaculis. Fusce fringilla dolor vel facilisis iaculis. Nam cursus metus vitae mi auctor, ac viverra lectus lobortis. Maecenas at enim gravida, rutrum justo non, blandit ligula.<br /><br />
Ut sollicitudin velit non dictum faucibus. In hac habitasse platea dictumst. Vestibulum arcu metus, posuere at eros ut, ultricies faucibus risus. Vestibulum lacus augue, vulputate a gravida quis, tincidunt quis nunc. Maecenas egestas orci elit, vel molestie erat semper ut. Integer pharetra orci vitae nisi volutpat porta. Sed ac pulvinar turpis, id ullamcorper enim. Curabitur tempus, ante eget cursus hendrerit, est urna hendrerit dui, at gravida dui justo commodo quam. Proin ac est nec odio rhoncus dignissim. Morbi placerat, nibh sed cursus pretium, nibh ipsum cursus leo, eget rutrum ante nisi nec orci. Vestibulum semper malesuada felis, vel scelerisque mi malesuada eu. Maecenas suscipit, ante at ultricies cursus, felis sem dictum erat, at facilisis lectus orci vel neque. Sed vel risus malesuada sem rutrum sodales tincidunt quis purus.<br /><br />
Sed mi ligula, luctus et urna et, commodo scelerisque est. Sed ante erat, commodo ac varius ac, pharetra a est. Donec cursus purus quis placerat vulputate. Phasellus mi urna, auctor a facilisis ac, vulputate nec purus. Nunc scelerisque massa diam, non convallis orci tincidunt vitae. Aliquam quis mauris eu elit bibendum vehicula sit amet et felis. Vivamus lacinia purus eu ligula condimentum, vitae fermentum purus bibendum. Aenean scelerisque nulla vel diam cursus scelerisque.<br /><br />
Etiam vestibulum tempor nibh, id vehicula lorem fermentum in. Etiam nulla ipsum, ullamcorper ullamcorper aliquet vel, aliquet quis justo. In vehicula ipsum vehicula magna volutpat, nec sagittis lorem placerat. Duis posuere volutpat arcu sit amet auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis ac mauris diam. Fusce venenatis leo facilisis adipiscing rhoncus. Aliquam erat volutpat. Duis molestie id massa sit amet auctor. Aenean semper eleifend facilisis.<br /><br />
Vestibulum neque nulla, tempus rhoncus turpis sed, iaculis varius orci. Curabitur dolor tellus, bibendum ut orci at, luctus lobortis sem. Phasellus at arcu quis turpis aliquet interdum eget vel erat. Aliquam erat tellus, vestibulum et neque sit amet, gravida vehicula sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nunc mauris, bibendum et egestas in, accumsan a nunc. Nunc a velit commodo, molestie libero eget, eleifend enim. Proin ut mi ac libero euismod viverra. <br /><br />
</p>
</div>
</div>
<div class="footer">
<h1>bigbeno37 2014</h1>
<h2>Created, maintained and tested on by bigbeno37</h2>
</div>
</body>
</html>
（CSS）
html, body{
height: 100%;
}
li{
float: right;
}
.container{
margin: auto;
position: relative;
top: 105px;
border-style: solid solid solid solid;
border-width: 1px;
border-color: #52C7C5;
width: 636px;
}
.header{
width: 100%;
background-color: #52C7C5;
height: 100px;
position: fixed;
margin: auto;
border-style: none solid;
border-width: 1px;
border-color: #52C7C5;
z-index: 1;
}
.headertext{
font-size: 24px;
color: white;
font-family: Verdana;
top: 70px;
left: 5px;
position: relative;
}
.menu{
list-style-type: none;
margin: 0 5px;
padding: 0;
overflow: hidden;
position: relative;
top: 50px;
}
.menu a{
display: block;
margin: 0 8px;
text-decoration: none;
color: white;
font-family: Verdana;
font-size: 16px;
padding: 3px;
}
.menu li:hover{
background-color: green;
}
.currentitem{
font-weight: bold;
}
.bodytext{
padding: 15px;
font-family: Verdana;
font-size: 12px;
}
.footer{
background-color: #52C7C5;
height: 30px;
width: 636px;
margin: auto;
border-style: none solid none solid;
border-width: 1px;
border-color: #52C7C5;
position: relative;
}
.footer h1, h2{
color: white;
position: relative;
margin: 10px;
font-family: Verdana;
font-size: 12px;
}
.footer h1{
float: left;
}
.footer h2{
float: right;
}
那么，我该怎么做才能解决这个问题？
编辑我已经更新了代码，基本上我只想要这样的东西但是集中在一起：
（HTML是相同的）
（CSS）
html, body{
height: 100%;
}
.header{
width: 636px;
background-color: #52C7C5;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.headertext{
font-size: 24px;
color: white;
font-family: Verdana;
top: 30px;
left: 15px;
position: relative;
}
.menu{
list-style-type: none;
margin: 0 5px;
padding: 0;
overflow: hidden;
position: relative;
top: 50px;
}
.menu li{float:left}
.menu a{
display: block;
margin: 0 8px;
text-decoration: none;
color: white;
font-family: Verdana;
font-size: 16px;
padding: 3px;
}
.menu li:hover{
background-color: green;
}
.currentitem{
font-weight: bold;
}
.container{
clear: both;
position: relative;
top: 100px;
min-height: 100%;
width: 636px;
}
.bodytext{
padding: 15px;
font-family: Verdana;
font-size: 12px;
}
.footer{
background-color: #52C7C5;
height: 30px;
width: 636px;
position: absolute;
bottom: 2px;
}
.footer h1, h2{
color: white;
position: relative;
margin: 10px;
font-family: Verdana;
font-size: 12px;
}
.footer h1{
float: left;
}
.footer h2{
float: right;
}
答案 0 :(得分：3)
<强>解释
我通过浮动其元素来纠正.menu的外观
.menu li{float:left}。
由于您的标题高度为100px并且位置固定，因此您应该定位.container relative并将其top设置为100px（ .header的高度，因此
我还要清除你的内容.header，这样它就不会浮动你的标题，以防你的标题位置发生变化。
最后，您必须将页脚.container{ clear:both; position:relative; top:100px;}放下（标题的高度）。
修改
如果您希望所有内容都居中，那么请在您的样式中使用100px，并为您的元素提供固定的margin:0 auto;，因为如果width无法使用margin:0 auto element没有定义宽度。
注意
对于fixed定位的元素，您必须使用其left和right属性。
你必须像这样定义它们 - ＆gt; left:0; right:0; margin:0 auto;，因此您的元素没有固定方向，因此它们会自动对齐中心。
.header{
width: 636px; /*this sets fixed with on the element*/
background-color: #52C7C5;
height: 100px;
position: fixed;
top:0;
left:0; /*aligning our element center by setting its left and right to 0*/
right:0;
margin:0 auto; /*centers our element (for fixed positioning we also use our left and right properties)*/
border-style: none solid;
border-width: 1px;
border-color: #52C7C5;
z-index: 1;
}
.headertext{
font-size: 24px;
color: white;
font-family: Verdana;
top: 15px;
left: 15px;
position: relative;
width:600px; /*fixed width for aligning center*/
margin:0 auto; /*aligns center*/
}
.menu{
width:600px; /*fixed width for aligning center*/
list-style-type: none;
margin: 0 5px;
padding: 0;
overflow: hidden;
position: relative;
top: 15px;
left:5px;
margin:0 auto; /*aligns center*/
}
.menu li{float:left}
.menu a{
display: block;
margin: 0 8px;
text-decoration: none;
color: white;
font-family: Verdana;
font-size: 16px;
padding: 3px;
}
.menu li:hover{
background-color: green;
}
.currentitem{
font-weight: bold;
}
.container{
clear:both;
position:relative;
top:100px;
width:600px; /*fixed width for aligning center*/
margin:0 auto; /*aligns center*/
}
.bodytext{
padding: 15px;
font-family: Verdana;
font-size: 12px;
}
.footer{
background-color: #52C7C5;
height: 30px;
width: 636px;
margin: auto;
border-style: none solid none solid;
border-width: 1px;
border-color: #52C7C5;
position: relative;
top:100px;
}
.footer h1, h2{
color: white;
position: relative;
margin: 10px;
font-family: Verdana;
font-size: 12px;
}
.footer h1{
float: left;
}
.footer h2{
float: right;
}
答案 1 :(得分：0)
您也可以使用
来定位页脚position: fixed;
bottom: 0;
所以它总是在底部，就像标题总是在顶部。
您也可以这样做：添加
将top: 0;添加到Header-Css并将margin-top: 105px;添加到Container并从Container中删除top: 105px;。
答案 2 :(得分：0)
我认为这很简单（有时候也有这个问题）。
如果您将width: 100%;应用于内容容器和页脚以及float:left;，则可能有解决方案。
另一方面，您可以尝试应用display:block以确保不是问题。
另外，为了解决定位问题，您可以使用padding: (height of header);并将其应用于以下内容。 （或曾经使用保证金，虽然我从来没有这样做。）
这将是我改变之后的代码..（我知道css故障排除可能很痛苦......很好地填写它自己： - ）
html, body{
height: 100%;
width: 100%;
}
li{
float: right;
}
.container{
margin: auto;
width: 100%;
display: block;
position: relative;
top: 105px;
border-style: solid solid solid solid;
border-width: 1px;
border-color: #52C7C5;
width: 636px;
}
.header{
width: 100%;
display: block;
background-color: #52C7C5;
height: 100px;
position: fixed;
margin: auto;
border-style: none solid;
border-width: 1px;
border-color: #52C7C5;
z-index: 1;
}
.headertext{
font-size: 24px;
color: white;
font-family: Verdana;
top: 70px;
left: 5px;
position: relative;
}
.menu{
list-style-type: none;
margin: 0 5px;
padding: 0;
overflow: hidden;
position: relative;
top: 50px;
}
.menu a{
display: block;
margin: 0 8px;
text-decoration: none;
color: white;
font-family: Verdana;
font-size: 16px;
padding: 3px;
}
.menu li:hover{
background-color: green;
}
.currentitem{
font-weight: bold;
}
.bodytext{
float: left;
display: block;
width: 100%; //to full parent width
padding: 15px;
font-family: Verdana;
font-size: 12px;
}
.footer{
background-color: #52C7C5;
display: block;
float: left;
height: 30px;
width: 636px; //you could make this 100% percent as well(up to you)
margin: auto;
border-style: none solid none solid;
border-width: 1px;
border-color: #52C7C5;
position: relative;
}
.footer h1, h2{
color: white;
position: relative;
margin: 10px;
font-family: Verdana;
font-size: 12px;
}
.footer h1{
float: left;
}
.footer h2{
float: right;
}