如何将 <div> 直接定位在另一个 <div> 下方答案

【问题标题】：How to position <div> directly below another <div>如何将 <div> 直接定位在另一个 <div> 下方
【发布时间】：2015-04-15 05:24:21
【问题描述】：

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

以下是目前的 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 相互对齐，但现在每个 div 之间存在间隙。见截图。绿色、黄色和蓝色部分之间不应有任何红色。

【问题讨论】：

请也发布您的 HTML。
请编辑您的帖子并向我们提供 HTML。
只是一个旁注：当我看到这样的东西时，我只需要推荐 Bootstrap 3。看看它。它使这种东西变得轻而易举。
只是一个注释，在标记中一个又一个 div，自然的行为是 div 一个在另一个之上堆叠 - 如果您消除 position:absolute 和 position，您可能会更轻松:relative 尽可能与你的 CSS 相关。
去研究折叠/相邻边距。已经讨论过很多次了。

标签： html css

【解决方案1】：

您的页脚 CSS 应该是：

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

【讨论】：

【解决方案2】：

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

它也解决了你的流动问题

【讨论】：

【解决方案3】：

我将您的代码放入 jsfiddle 中，但无法复制您的结果。仅从原样查看您的 CSS，我认为您的解决方案是添加 position: relative;到页脚。

位置规则将元素从正常的文档流中取出。在 div 的情况下，它们固有的 display: block;会自然而然地将自己堆叠在一起。通过使用位置：绝对；和位置：相对，您将 div 从文档流中取出并绝对定位它们（这样 top: 0; 将到达窗口的顶部）或相对（这样 top: 0; 将到达下一个的底部）最高元素）。

使用位置规则进行布局非常混乱且不可扩展。正确的方法是使用浮动和清除。你的代码暴露出对 CSS 缺乏正确的理解，这没关系。如果是这种情况，我鼓励您改用 Bootstrap。它抽象了 CSS 的细节和琐事，让你的布局在更短的时间内启动和运行。如果您有兴趣了解有关 CSS 的更多信息，我建议您阅读有关块、位置、浮动和清除的内容。

【讨论】：