Css Divs重叠、无法正确定位页脚以及定位的一般问题
我似乎无法让我的页脚div粘贴到页面底部，我不希望它固定为与窗口一起滚动，仅在文档底部。它似乎漂浮在我的主要内容之上。我也很难让沙发排成一排，它们的顶部和底部似乎都有衬垫。我的标记中有什么遗漏吗 这是我的htmlCss Divs重叠、无法正确定位页脚以及定位的一般问题,css,html,Css,Html,我似乎无法让我的页脚div粘贴到页面底部，我不希望它固定为与窗口一起滚动，仅在文档底部。它似乎漂浮在我的主要内容之上。我也很难让沙发排成一排，它们的顶部和底部似乎都有衬垫。我的标记中有什么遗漏吗 这是我的html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>The Frag Fa
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>The Frag Factory</title>
<div class="header">
<div class="logo">
<img src="includes/images/tffLogo.jpg"/>
</div>
<div class="nextLan">
The Next LAN is on April 21-24th in
</br><span>00d.00h.00m.00s</span>
</div>
</div>
</head>
<body
<div class="navContainer">
<ul>
<li><a href="#">Events</a> |</li>
<li><a href="#">Contact Us</a> |</li>
<li><a href="#">Next Lan</a> |</li>
<li><a href="#">Sponsers</a> |</li>
<li><a href="#">Servers</a> |</li>
<li><a href="#">Community</a></li>
</ul>
</div>
<div class="container">
<div class="sliderContainer">
<img src="includes/images/sliderImage1.jpg"/>
</div>
<vertical around themdiv class="mainContainer">
<h1>MAIN CONTENT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. Praesent semper ullamcorper dolor, quis scelerisque neque venenatis quis. Vestibulum lacinia ut dolor ac fermentum. Pellentesque ornare facilisis ultrices. Donec vel purus eleifend, euismod metus in, faucibus sem. Nullam nulla odio, tristique sed velit vitae, pretium feugiat nibh. Sed a odio leo. Nullam eget enim pulvinar magna volutpat scelerisque eget nec est. Quisque sagittis tincidunt orci. Suspendisse ac erat ut turpis luctus euismod et eget dolor. Duis cursus, erat sed condimentum venenatis, purus urna sodales augue, vitae viverra purus augue sed tortor. Nullam adipiscing dapibus ultricies. In hac habitasse platea dictumst.</p>
</div>
<div class="sideBar">
<center><img src="http://www.placehold.it/150x150"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. </p>
</div>
</div>
<footer>
<div id="footerContainer">
THIS IS A FOOTER
</div>
</footer>
</body>
</html>
不要使用不必要的div和css。请将此作为参考好的，我将尝试将我的评论整理成一个答案： 首先，您的
HTMLCSSHTML
（对于HTML5
），或者
对于XHTML
。您不应该使用
。这是HTML4.01
和以前版本的标签的结束版本。。。希望您没有使用HTML4标准
对于页脚问题，请尝试。它现在不在内容的底部，因为您使用的是position:absolute，它从文档的正常流中删除页脚，并将其显式放置在文档中的一个特定位置，而不考虑其周围、之前或之后的任何内容
这里有一个更新的，试图解决您的主要问题。注意，在JSIDLE链接中，
、
和
标记被删除，因为它们不是必需的
最后，如果CSS中有空元素（例如p{}和h1{}），那么应该删除它们，而不是保留它们。如果您最终需要设置这些元素的样式，则始终可以重新添加它们 好的，我检查了你的HTML，它有几个错误/无效的HTML。与其试图解释一切，不如看一看
您遇到的主要问题是，除了页脚之外，其他所有内容都需要一个包装器，然后将其高度设置为100%，底部边距为-180px（页脚高度）。您还需要删除页脚的绝对位置，这是不需要的
更新：我花了更多的时间，为你找到了一个更好的解决方案，希望能解决你所有的问题。我前面提到的页脚将保留在内容的底部，但不一定是页面的底部。制作页脚的最佳方法是使html和正文的高度均为100%，容器的高度均为100%（在您的情况下，最小高度可防止页脚在未最大化时“吃掉页面”），页脚上的上边距为负值，等于页脚的高度。这是一个更新的演示在行动。我还更新了下面的代码以匹配演示。如果您还有问题，请随时提问
HTML
对于您的页脚问题，请尝试：也阅读：）我正在使用它，实际上也可以：）这是很多div。为什么不用桌子呢？有些人似乎很害怕使用它们，他们可以让这些工作变得简单得多。@JohnnyBones表格应该只用于表格数据。因此有了这个名字。@TylerH-有时候你得用撬棍而不是锤子。如果表格让你的工作更容易，那么你就是一个傻瓜，因为你没有使用表格数据而避开它们。我使用表格进行大量GUI创建，因为它使字段的排列像馅饼一样简单。如果用户有很多错误/问题，为什么要采取“我解决了你的问题，但我不打算解释它们是如何或为什么出现问题”的路线？我解释了他的主要问题，他真正的问题是关于（页脚）。他其余的问题是HTML语法错误，他应该能够看到将他的代码与我在答案中的代码进行比较。如果你看标题，页脚只是实际问题的三个部分之一。当然，他可以看到有什么不同，以及如何修复这个精确的文档以使其工作，但是您还没有解释为什么他的代码中的错误是错误；你只是说它们是错误。从长远来看，这对他没有多大帮助，对其他有类似问题的人也没有任何帮助（因为他们不会拥有与此用户完全相同的文档）。在这里，你提供了一个修复，但它是一个。感谢输入的家伙，我不是一个主HTML编码器，你可以看到。。。我重新调整了代码，但我似乎无法让页脚显示在屏幕边缘，它在左右两侧都有边框。是否有办法解决此问题？@Th0rn0您的页脚div是否与文档的其余部分分开，或者是否在其他部分中？
body{
font-family: helvetica;
letter-spacing: 0.09px;
color: #717171;
background-image: url("includes/images/dark_mosaic.png");
display:block;
}
h1{}
h2{}
h3{}
p{}
.clear{
clear:both;
}
/*HEADER*/
.header{
width:900px;
margin:0 auto;
height:75px;
background-color: #000;
}
.logo{
float:left;
}
.logo img{
height:70px;
width:auto;
}
.nextLan{
float:right;
color:#36B627;
text-align: center;
padding-right:20px;
padding-top: 6px;
}
.nextLan span{
font-size: 40px;
font-weight: bolder;
vertical-align: center;
}
/*NAVIGATION*/
.navContainer{
background-color: #535353;
width:900px;
height:25px;
margin:0 auto;
line-height: 25px;
text-align:center;
position: relative;
top:-9px;
}
.navContainer li{
display:inline;
}
/*SLIDER*/
.sliderContainer{
width:900px;
margin:0 auto;
}
.sliderContainer img{
width:900px;
height:auto;
}
/*MAINCONTENT*/
.container{
width:900px;
margin:0 auto;
position: relative;
}
.mainContainer{
width:680px;
background-color: #000;
float:left;
padding:10px;
}
.sideBar{
width:170px;
background-color: #D66767;
float:left;
padding:10px;
margin-left: 10px;
}
/*FOOTER*/
#footerContainer{
position:absolute;
height: 180px;
clear:both;
background-color: #fff;
width:100%;
padding:0;
margin:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>The Frag Factory</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<img src="includes/images/tffLogo.jpg"/>
</div>
<div class="nextLan">
The Next LAN is on April 21-24th in
<br/><span>00d.00h.00m.00s</span>
</div>
</div>
<div class="navContainer">
<ul>
<li><a href="#">Events</a> |</li>
<li><a href="#">Contact Us</a> |</li>
<li><a href="#">Next Lan</a> |</li>
<li><a href="#">Sponsers</a> |</li>
<li><a href="#">Servers</a> |</li>
<li><a href="#">Community</a></li>
</ul>
</div>
<div class="sliderContainer">
<img src="includes/images/sliderImage1.jpg"/>
</div>
<div class="mainContainer">
<h1>MAIN CONTENT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. Praesent semper ullamcorper dolor, quis scelerisque neque venenatis quis. Vestibulum lacinia ut dolor ac fermentum. Pellentesque ornare facilisis ultrices. Donec vel purus eleifend, euismod metus in, faucibus sem. Nullam nulla odio, tristique sed velit vitae, pretium feugiat nibh. Sed a odio leo. Nullam eget enim pulvinar magna volutpat scelerisque eget nec est. Quisque sagittis tincidunt orci. Suspendisse ac erat ut turpis luctus euismod et eget dolor. Duis cursus, erat sed condimentum venenatis, purus urna sodales augue, vitae viverra purus augue sed tortor. Nullam adipiscing dapibus ultricies. In hac habitasse platea dictumst.</p>
</div>
<div class="sideBar">
<img src="http://www.placehold.it/150x150"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. </p>
</div>
</div>
<footer>
<div id="footerContainer">
THIS IS A FOOTER
</div>
</footer>
</body>
</html>
html, body {
height: 100%;
min-height: 100%;
width: 100%;
}
body{
font-family: helvetica;
letter-spacing: 0.09px;
color: #717171;
background-image: url("includes/images/dark_mosaic.png");
display:block;
margin: 0;
}
h1{}
h2{}
h3{}
p{}
.clear{
clear:both;
}
/*HEADER*/
.header{
margin:0 auto;
height:75px;
background-color: #000;
}
.logo{
float:left;
}
.logo img{
height:70px;
width:auto;
}
.nextLan{
float:right;
color:#36B627;
text-align: center;
padding-right:20px;
padding-top: 6px;
}
.nextLan span{
font-size: 40px;
font-weight: bolder;
vertical-align: center;
}
/*NAVIGATION*/
.navContainer{
background-color: #535353;
width:900px;
height:25px;
margin:0 auto;
line-height: 25px;
text-align:center;
top:-9px;
}
.navContainer li{
display:inline;
}
/*SLIDER*/
.sliderContainer{
margin:0 auto;
height: auto;
}
/*MAINCONTENT*/
.container{
width:900px;
margin: auto;
height: 100%;
min-height: 750px;
}
.mainContainer{
width:680px;
background-color: #000;
float:left;
padding:10px;
}
.sideBar{
width:170px;
background-color: #D66767;
float:left;
padding:10px;
margin-left: 10px;
}
/*FOOTER*/
#footerContainer{
height: 180px;
margin-top: -180px;
text-align: center;
background-color: #000;
width:100%;
min-width: 900px;
}