Question

我的CSS结构基本上是一个容器，它包含背景和侧边框。在这个容器中，我插入了我的div元素（标题，导航，侧面菜单......）在底部，我包括我的页脚（现在不重要）。我的问题是，我无法真正调整容器的高度。我希望它自动与其中最长的div元素（通常是中心列）一样多。下图代表所有这些，固定高度为400px。

http://tinypic.com/view.php?pic=2qnw8pv&s=8#.U5nZAyhqNuB

这是CSS代码：

容器：

#pagewidth{
    position: relative;
    width: 1000px;
    text-align:left;
    margin: 0 auto;
    height: 400px;
    border-top: 1px solid #354350;
    border-left: 1px solid #354350;
    border-right: 1px solid #354350;
    background-color:#0f0f0f;
    }

标题：

#header {
    position: relative;
    float: left;
    height:150px;
    width: 100%;
    display: block;
    background-image:url('images/logo2.png');
    /*border-bottom: 1px solid #354350; */
    }

列结构：

    #columns {
    width: 100%;
    position: relative;
    }

 #leftmenu {
    position: relative;
    width: 17%;
    float: left;
    }

#twocols {
    position: relative;
    width: 81%;
    float: right;
    }

#centercol {
    position: relative;
    width: 67%;
    float: left;
    }
#rightmenu {
    position: relative;
    width: 20%;
    float:right;
    }

最后，页脚：

#footer{
 height: 30px;
 clear: both;
 position: relative;
 display: block;
 overflow: auto;
 background-color: #F8F4F4;
 width: 100%;
 border-top: 2px solid #E8E8E8;

}

P.S - 我还没有添加导航和表格式设计的专栏，因为我认为它们与此事无关。

Answer 1

只需删除height属性即可。像这样

#pagewidth{
position: relative;
width: 1000px;
text-align:left;
margin: 0 auto;
border-top: 1px solid #354350;
border-left: 1px solid #354350;
border-right: 1px solid #354350;
background-color:#0f0f0f;
}

并向您的clearfix添加一个名为HTML的课程。

<div id="pagewidth" class="clearfix">

然后将其添加到您的CSS

  .clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

有关此问题的详细信息以及崩溃浮动here

将div元素的高度应用于div中的div

1 个答案: