如何将<div>直接放在另一个<div> </div> </div>下面

Question

我正在尝试将蓝色<div>定位在黄色（主要文本区域）下方700px x 75px处。黄色区域的大小将根据每页的不同而不同，但蓝色区域将是版权等的页脚。

到目前为止，下面是CSS。

body    
{
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
background: white;
margin: 50px 0px 0px 0px;
}

#header 
{
height: 75px;
width: 900px;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
position: relative;
}

#socialmediaicons
{
position: absolute;
height: 35px;
top: 30px;
right: 0;
border: 0;
}

.socialmediaicon
{
padding-left: 5px;
}

#maincontent
{
width: 900px;
height: auto;
background: red;
padding: 0px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
}

#mainmenu
{
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 20px;
position: absolute;
left: 0px;
top: 0px;
}

#gallery
{ 
position: absolute;
left: 200px;
top: 0px;
visibility: hidden; 
border: 0px;
width: 700px;
height: 350px;
background: yellow;
}

#maintextcontainer
{
position: absolute;
background: yellow;
top: 350px;
left: 200px;
width: 700px;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 20px;
}

#footer 
{
height: 75px;
width: 700px;
background: blue;
padding: 0px 0px 0px 0px;
}

p.maintexttitle
{
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 30px;
}

p.maintext
{
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 16px;
}

这是HTML

<div id="header">

<div id="socialmediaicons">
<a href="https://www.facebook.com/pages/SCNI/277418002319495"            target="_blank" onmouseover="image1.src=loadImage1.src;"  onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="images/socialmedia/sm1_off.jpg"   class="socialmediaicon" /></a>

<a href="https://twitter.com/scnidesign" target="_blank" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="images/socialmedia/sm2_off.jpg" class="socialmediaicon" /></a>

<a href="http://instagram.com/scnidesign" target="_blank" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="images/socialmedia/sm3_off.jpg" class="socialmediaicon" /></a>

<a href="http://www.smicon4.com" target="_blank" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
<img name="image4" src="images/socialmedia/sm4_off.jpg" class="socialmediaicon" /></a>

<a href="https://dribbble.com/SCNI" target="_blank" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
<img name="image5" src="images/socialmedia/sm5_off.jpg" class="socialmediaicon" /></a>
</div>

</div>



<div id="maincontent">

<div id="mainmenu">
<img src="images/logo.jpg">
<p class="mainmenu"><a href="index.html" class="mainmenu">home</a></p>
<p class="mainmenu"><a href="about.html" class="mainmenu">about</a></p>
<p class="mainmenu"><a href="work.html" class="mainmenu">work</a></p>
<p class="mainmenu"><a href="work.html" class="mainmenu">services</a></p>
<p class="servicesmenu"><a href="design.html" class="servicesmenu">design</a>     </p>
<p class="servicesmenu"><a href="development.html"     class="servicesmenu">development</a></p>
<p class="mainmenu"><a href="contact.html" class="mainmenu">contact</a></p>
</div>

<div id="gallery"></div>

<div id="maintextcontainer">
<p class="maintexttitle"><strong>welcome</strong></p>
<p class="maintext">At SCNI Design, we offer cost effective Logo, Graphic  and Website design and developmental services to small businesses across the   globe.</p>
</div>

<div id="footer"></div>

</div>



</body>

</html>

我能够让div在彼此之上对齐，但现在每个之间都有差距。看截图。绿色，黄色和蓝色部分之间不应有任何红色。

Answer 1

你的页脚CSS应该是：

.footer{
  position: fixed;
  bottom: 0;
}

Answer 2

使用粘性页脚 http://ryanfait.com/sticky-footer/

它也解决了你流动的问题

Answer 3

我将您的代码放入jsfiddle但无法复制您的结果。只是按原样查看你的CSS，我认为你的解决方案是增加位置：相对;到页脚。

位置规则从正常文档流中获取元素。在div的情况下，它们固有的显示：块;将自然地叠加在一起。通过使用position：absolute;和位置：相对，你是从文档流中取出div并绝对定位它们（​​这样顶部：0;将会触及窗口顶部）或相对（所以顶部：0;将触及下一个底部）最高要素）。

使用布局的位置规则非常混乱且不可扩展。这样做的正确方法是使用浮动和清除。你的代码背叛了缺乏对CSS的正确理解，这是可以的。如果是这种情况，我建议您改用Bootstrap。它抽象了CSS的minutae和琐事，并将在更短的时间内启动和运行您的布局。如果您有兴趣了解有关CSS的更多信息，我建议阅读有关块，位置，浮动和清除的信息。