Css 父高度不包含绝对定位的子高度

我想把“版权”

放在网站底部。当我试图将两个

s（

id=“div0”

和

id=“copyright”

）放在容器中

时，它不起作用

现在我很困惑，因为我认为

自然是一个块元素，所以

div0

和

copyright

之间自然会有一个换行符，

copyright

将位于

div0

旁边

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

---

这是。

给大div。给Css如下

position: relative;
height: 700px;

&版权司

#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;
}

---

试试这个。我希望它会有所帮助。

您遇到的问题与此类似，容器

id=“div0”

没有成长为包含子元素。如果右键单击，您可以看到这一点→ 检查铬合金中的

，参见

高度=0px

使元件脱离正常流动，这意味着它不会在元件正常应处留下间隙

版权

呈现在顶部，因为前面的

没有高度，因为它实际上不包含任何图像（它们都超出了正常流程）

解决此问题的一个（快速）方法是简单地向

添加高度

您可能会认为使用不同的位置值将起作用，因为

position:relative

确实会在元素通常应该位于的位置留下一个间隙。但是，您不能在示例中使用此选项，因为所有图像的正常位置都是并排排列的，因此您仍然会遇到相同的容器高度问题

另一种方法是左右浮动3幅图像。这也有同样的问题，因为浮动元素也超出了正常流程，但是有许多CSS方法可以配置父元素以正确包含浮动子元素，例如CSS属性

在下面的示例中，我选择了

溢出：hidden

（请参阅），以使父级正确包含子级-

CSS

我还删除了大量重复项，并选择了

可见性：隐藏
和
可见性：可见
，而不是更改
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>


CSS第一作业
©2013年由NEWBIESVN团队的TS7TM发布。版权所有。

此外，它已被弃用，因此如果您有时间，我将研究一种CSS方法来居中文本。
非常感谢！这是迄今为止我收到的最好的答案。祝你好运，伙计！