具有高度的父 div:100% 不起作用

Ada*_*dam 5 css height

可能重复:
CSS - 100% 高度不起作用

我有3div秒,div-1是背景和div-2div-3是两个容器(一个用于文本,一个用于照片)。

HTML:

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
</div>
Run Code Online (Sandbox Code Playgroud)


CSS:

#div-1 {
width: 100%;
height:100%;
padding: 40px 0;
margin:0;
}

#div-2 {
width: 500px;
margin: 0;
float: left;
}

#div-3 {
width: 200px;
margin: 0;
float: right;
}
Run Code Online (Sandbox Code Playgroud)


这就是我得到的:

在此处输入图片说明

为什么height: 100%不起作用?

Web*_*ter 5

删除height: 100%;#div-1和添加position: absolute;。它会工作得很好。


Ive*_*.me 4

这可以工作

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div style="clear:both"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 不必要的复杂性。 (3认同)