【问题标题】:Why my floating div height is not 100%?为什么我的浮动 div 高度不是 100%?
【发布时间】:2011-12-13 10:50:16
【问题描述】:

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

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

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

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

【问题讨论】:

  • 你能提供你的html结构吗?

标签: html css height


【解决方案1】:

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

【讨论】:

  • 有没有办法在不指定高度的情况下做到这一点(并且不使用丑陋的桌子)?
  • 您可以将外部 div 的样式更改为 height: 100%;,然后在您的 CSS 中添加另一条规则 html, body {height: 100%;}。但无论哪种方式,都必须指定外部 div 的高度。
【解决方案2】:

来自CSS 2.1 Spec

百分比

指定百分比高度。百分比是根据生成框的高度计算的 包含块。如果包含块的高度不是 明确指定(即,它取决于内容高度),并且这个 元素不是绝对定位的,值计算为'auto'。

因此,由于包含块没有指定高度,浮动元素的高度为auto

【讨论】:

  • 当然不是。但是提供的两个答案回答了您的问题。也许如果你解释你想用布局完成什么,有人可以提出另一种方法。如果仅仅是柱子占据整个高度的外观,经典的faux column technique是一种方式。
  • 所以您建议我将“为什么不...”更改为“我该怎么做...”所以提供的 2 个答案不能回答我的问题?如果被问到“你剪头发了吗”,你是那种人吗?你回答:“不,别人替我剪了”
  • 您还没有确切地告诉我们您要完成的工作。我们可以猜测,但如果你告诉我们,它可能会更快。 2 列布局与 100% 高度侧边栏?如果这就是你想要的,我上面链接的文章将实现这一点。
  • 我确实告诉了我要完成的工作“我想将 div 高度扩大 100%,但它不起作用”
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-10-06
  • 2013-07-18
  • 2011-06-04
  • 2013-02-02
  • 1970-01-01
  • 1970-01-01
  • 2015-09-06
相关资源
最近更新 更多