为什么我的浮动div高度不是100%?

aja*_*221 -1 html css height

我想将div高度扩展100%,但它不起作用:

在此输入图像描述

到目前为止,我的代码是:

.add{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}
Run Code Online (Sandbox Code Playgroud)

和HTML:

<div>

<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>

Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here

</div>
Run Code Online (Sandbox Code Playgroud)

shi*_*kou 5

你应该指定外部div的高度.这样的东西会起作用:

<!doctype html>
<html>
<head>
<style>
.add
{
    border:1px solid #ddd;
    display:block;
    float:right;
    margin:0 0 10px 10px;
    padding:10px;
    height:100%;
}
</style>
</head>
<body>
<div style="height: 768px;">

<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>

Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here

</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)