Html 为什么我的浮动div高度不是100%？_Html_Css_Height

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

html css

Html 为什么我的浮动div高度不是100%？,html,css,height,Html,Css,Height,我想将我的div高度增加100%，但它不起作用：到目前为止，我的代码是： .add{ border:1px solid #ddd; display:block; float:right; margin:0 0 10px 10px; padding:10px; height:100%; } <div> <div class="add"> <div style="width:100px;height:400px;background:#ccc;"><

我想将我的div高度增加100%，但它不起作用：

到目前为止，我的代码是：

.add{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}

<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>

和HTML:

.add{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}

<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>


我爱你，我爱你。。。这里有很多文字
我爱你，我爱你。。。这里有很多文字
我爱你，我爱你。。。这里有很多文字

您应该指定外部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>


添加
{
边框：1px实心#ddd；
显示：块；
浮动：对；
利润率：0.10px 10px；
填充：10px；
身高：100%；
}
我爱你，我爱你。。。这里有很多文字
我爱你，我爱你。。。这里有很多文字
我爱你，我爱你。。。这里有很多文字

来自：

百分比

指定高度百分比。百分比是根据生成的长方体形状的高度计算的包含块。如果包含块的高度不是明确指定（即，它取决于内容高度），并且元素未绝对定位，值计算为“自动”

因此，由于包含块没有指定的高度，浮动元素的高度是

auto

您也可以提供您的html结构吗？有没有不指定高度（并且不使用丑陋的表格）的方法来实现这一点？您可以将外部div的样式更改为

height:100%

，然后将另一条规则

html，body{height:100%；}

添加到CSS中。但无论如何，必须指定外部div的高度。当然不是。但这两个答案回答了你的问题。也许，如果你解释一下你想用布局来完成什么，有人可以提出另一种方法。如果这仅仅是圆柱占据整个高度的外观，那么经典就是一种方式。所以你建议我将“为什么不…”改为“我该怎么做…”所以提供的两个答案没有回答我的问题？。如果被问到“你剪头发了吗？”你会回答：“没有，是别人给我剪的。”你没有告诉我们你到底想做什么。我们可以猜，但如果你告诉我们，可能会更快。带100%高度边栏的2列布局？如果这就是你想要的，我在上面链接的那篇文章将实现这一点。我确实告诉过你我想要实现的目标：“我想把我的div高度提高100%，但它不起作用。”