子元素比父元素长

时间:2014-05-14 05:39:42

标签: css layout

Hy,我做了一个简单的布局,使用div包含一个名为" main"的父元素。和两个子元素称为" header"和"内容"。

示例显示在下面的链接中。

http://jsfiddle.net/kazekagesama01/kw73F/

#main
{
width       : 1000px;
min-height  : 1000px;
height      : auto;
border      : 1px dashed green;
position    : absolute;
left        : 170px;
}

#header
{
width       : 100%;
height      : 250px;
border      : 1px dotted blue;
}

#content
{
width       : 100%;
height      : 1000px;
border      : 1px dotted red;
position            : relative; 
top         : 20px;
}

我的问题是,为什么布局会继续制作第二个子元素,即" content",比父元素长,即#34; main"。为了您的信息,我设置了" main"的高度。自动。

需要你的帮助,谷歌搜索但没有找到任何答案。

3 个答案:

答案 0 :(得分:0)

overflow:hidden添加到父

#main
{
width       : 1000px;
min-height  : 1000px;
height      : auto;
border      : 1px solid black;
position    : absolute;
left        : 170px;
overflow    : hidden;    
}

http://jsfiddle.net/kw73F/2/

答案 1 :(得分:0)

#content { width : 100%; height : 1000px; border : 1px dotted red; position : absoulate;
top : 20px; }

答案 2 :(得分:0)

为什么要使用不必要的positioning。从布局中删除position:absoluteposition:relative,您的布局就可以了。