Div是0px高

Question

我的<div> id="page"包含整页。我的<div> id="main" is 25px (the 25px is only coming from it having padding) tall and should be a full page tall still. My with id =“容器”`位于主内部，应该是一个没有页脚的整页高，但它是0px高，导致其内部元素溢出它的。

My with id =“container”`不包含其内部HTML元素。它们从容器中溢出。如何让它们不会溢出？这是HTML，CSS和图像，它显示我将鼠标悬停在“主要”上并占据25px。干杯。

HTML：

<div id="page"   
<div id="main">
<div id="container">
     <div id="left-hand-side"></div>
      <div id="right-hand-side">
       <img src="resources/Logo.png"/>
       <?wp_nav_menu(array('theme_location'=>'primary', 'menu_class'=>'nav-menu'));?>
      </div>    
    </div>

CSS：

    /*
Theme Name:     2011-child-theme-commons
Description:    Child theme for the Commons website
Author:         admin
Template:       twentyeleven

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url("../twentyeleven/style.css");
#branding {
    display:none;
}

.nav-menu .menu-item {
    font-size:2em;
    margin-bottom: 70px;
    margin-right:30px;
    list-style-type: none;
    text-decoration:none;
    float: right;
}

.nav-menu .menu-item a {
    color:#333;
}

.first_menu_item a:hover {
    color:#FEBA2E;
    list-style-type: none;
    text-decoration:none;
}

.second_menu_item a:hover {
    color:#FF46C8;
    list-style-type: none;
    text-decoration:none;
}

.third_menu_item a:hover {
    color:#2B6AFF;
    list-style-type: none;
    text-decoration:none;
}

#comments {
    display:none;   
}

body {
    background: #FFF;
}

#container {
    margin-top:-24px;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    position:relative;
    background: url("../../../resources/plan_edited.png") no-repeat;
    background-size:contain;
    height: 100%;
    width: 100%
}

#colophon {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

#right-hand-side img {
    margin:auto;
    z-index:2;
    width:100%;
}

#right-hand-side h1 {
    float:right;
    margin-right:30px;
    margin-bottom:50px;
    font-size:2em;
    cursor:pointer;
}

#logo {
    cursor:pointer; 
}

#right-hand-side {
    float:right;
    width:36%;
    position:absolute;
    height:inherit;
    z-index:2;
    margin-left:64%;
}

#left-hand-side {
    z-index:3;
    height:inherit;
    width:64%;
    float:left;
    position:absolute;
}

#left-hand-side article {
    background-color:#FFF;
    margin-left:10%;
    margin-top:10%;
    margin-right:10%;
    border:#666 1px solid;
    position:absolute;
    padding-top:2em;
}

#left-hand-side .entry-content {
    padding: 0.5em;
    width: 85%;
}

#left-hand-side .entry-header {
    width: 85%;
}

Answer 1

您遇到的是不会自动调整大小以包含其浮动子元素的元素。用于补救的术语是“清除浮子”。有多种方法可以做到这一点，最简单的方法可能就是将overflow:auto;添加到容器中。它会迫使容器容纳浮动的孩子。

详细信息请见：http://www.quirksmode.org/css/clearing.html

#container {
    margin-top:-24px;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    position:relative;
    background: url("../../../resources/plan_edited.png") no-repeat;
    background-size:contain;
    height: 100%;
    width: 100%;
    overflow: auto;
}

修改

#left-hand-side和#right-hand-side样式绝对定位，这会阻止#container正确包含它们。您需要删除position:absolute;样式。如果你真的需要position:absolute;样式，那么你完成这个任务的唯一方法就是给容器一个特定的高度，这足以让它包含它的子节点。

Answer 2

它不包含它，因为在#right-hand-side上你的图像上有一个90px的边距，这样可以强制图像开箱即用。

http://jsfiddle.net/Cb5h8/