父元素的高度不包含绝对定位的子元素。

Question

我想将 "版权" <div> 放置在网站底部。当我尝试将两个 <div> (id="div0" 和 id="copyright") 放在一个容器 <div> 中时，它不起作用。

对我来说很困惑，因为我认为 <div> 自然是块级元素，所以在 div0 和 copyright 之间自然会有一个换行，并且 copyright 将位于 div0 的旁边！

我不知道我做错了什么。我只使用 HTML 和 CSS。

这是我的演示。

- sonlexqt

Answer 1

你遇到的问题类似于jQueryUI滑块：绝对定位元素和父容器高度，即容器id="div0"未能扩展以包含子元素。如果你在Chrome中右键单击→检查<div id="dev0">，你会看到height = 0px。 position:absolute使元素脱离正常流程，这意味着它不会在元素应该正常出现的位置留下空隙。

版权<div>显示在顶部，因为前一个<div>没有高度，因为它实际上不包含任何图像（它们都不在正常流程中）。

解决此问题的一种（快速）方法是简单地向<div id="dev0">添加高度。

你可能认为使用不同的position值会起作用，比如position:relative，它确实会在元素应该正常出现的位置留下空隙。但是，在你的示例中无法使用此方法，因为所有图像的正常位置都是内联排列在一起，因此你仍然会遇到相同的容器高度问题。

另一种方法是将3个图像左右浮动。这也有相同的问题，因为浮动元素也不在正常流程中，但是有许多CSS方法可以配置父元素以正确包含浮动的子元素，例如CSSclear属性。

在以下示例中，我选择使用overflow:hidden（请参见http://colinaarts.com/articles/the-magic-of-overflow-hidden/）使父元素正确包含子元素 - 请查看演示。 CSS 我还删除了很多重复内容，并选择使用visibility:hidden和visibility:visible而不是更改z-index。

body {
    background-color: #5C5C3D;
}

#main {
    position: relative;
    width: 1366px;
    margin: 0 auto;
    background-color: #292929;
    overflow: hidden;
}

#leftColumn {
    float:left;
}

#rightColumn {
    float: right;
}

#leftColumn, #rightColumn {
    padding:20px 10px 0 10px;
}

#leftColumn img, #rightColumn img {
    display:block;
    margin-bottom:20px;
}

#img1, #img2, #img3, #img4, #img5, #img6 {
    width: 253px;
    height: 190px;
}

#imgCenter1, #imgCenter2, #imgCenter3, #imgCenter4, #imgCenter5, #imgCenter6 {
    position: absolute;
    top: 20px;
    left: 278px;
    width: 810px;
    height: 610px;
    visibility: hidden;
}

#img1:hover ~ #imgCenter1, #img2:hover ~ #imgCenter2, #img3:hover ~ #imgCenter3, #img4:hover ~ #imgCenter4, #img5:hover ~ #imgCenter5, #img6:hover ~ #imgCenter6 {
    visibility: visible;
}

#copyright{
    position: relative;
    margin:0 auto;
    max-width: 1000px;
    border: 2px solid white;
    padding-top: 15px;
    padding-bottom: 15px;
    color:white;
    background-color: #5C5C3D;
    font-family: tahoma;
    font-size: 0.8em;
}

HTML

<div id="main">
    <div id="leftColumn">
        <img id="img1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/Pixar_Animation_Studios_2.jpg/800px-Pixar_Animation_Studios_2.jpg"/>
        <img id="img2" src="http://www.jjtoy.com/wallpaper/original/Doc_Martin___Pixar_Cars_by_GrangerDesign.jpg"/>
        <img id="img3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/Rowdy_McQueen___Pixar_Cars_by_GrangerDesign.jpg"/>
        <img id="imgCenter1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/Pixar_Animation_Studios_2.jpg/800px-Pixar_Animation_Studios_2.jpg">
        <img id="imgCenter2" src="http://www.jjtoy.com/wallpaper/original/Doc_Martin___Pixar_Cars_by_GrangerDesign.jpg">
        <img id="imgCenter3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/Rowdy_McQueen___Pixar_Cars_by_GrangerDesign.jpg">
    </div>
    <div id="rightColumn">
        <img id="img4" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/MonstersIncForTheBirdsWallpaper800.jpg"/>
        <img id="img5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg"/>
        <img id="img6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/Wall_E_Jr____Pixar___iBook_by_iFab.jpg"/>
        <img id="imgCenter4" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/MonstersIncForTheBirdsWallpaper800.jpg">
        <img id="imgCenter5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg">
        <img id="imgCenter6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/Wall_E_Jr____Pixar___iBook_by_iFab.jpg">
    </div>
</div>
<div id="copyright">
    <center>CSS 1st Homework</center>
    <center>&#169;2013 by TS7<sup>TM</sup> from NEWBIESVN Team. All rights reserved.</center>
</div>

此外，<center> 标签已经被弃用，如果您有时间，建议使用 CSS 实现文本居中。请注意不要删除 HTML 标签。

- andyb

---

非常感谢！这绝对是我收到过的最好的答案。祝你一切顺利，伙计！ - sonlexqt

Answer 2

将大的div设置样式如下：

position: relative;
height: 700px;

& 转版权 div

#copyright {
position: absolute;
margin: 0 auto;
width: 1000px;
border: 2px solid white;
padding-top: 15px;
padding-bottom: 15px;
color: white;
background-color: #5C5C3D;
left: 50%;
margin-left: -500px;
font-size: 0.8em;
bottom: 0;
}

试试这个。希望它有帮助。

- Archna Rangrej