logo标签列表

百分比单位的min-height属性无法正常使用。

htmlcss
3

这就是文档的基本样子：

<body>
<div id="content_holder">
<div class='all_links'>
</div>
  <div class="item">
        <div class="notice"></div>
    </div>
</div>
<div id="bottom_nav">
</div>
</body>

以及CSS：

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    }

body{
overflow-y:scroll;
min-width: 1024px;
}

#content_holder{
    min-height: 100%;
}

.item {
width: 800px;
position: relative;
top: 100px;
left: 50%;
margin-left: -400px;
text-align: center;
min-height: 100%;

在这个特定的页面上，关于最小高度的html、body和.item属性无法使用百分比。

在其他页面上一切正常。 .item的父元素是。我不知道这里出了什么问题。 当我用Chrome Dev工具检查高度时，发现该页面的高度为360px，这当然是它应该有的两倍少。

为什么会这样？

更新: 演示

我发现，对于#content_holder属性，高度属性不起作用，但对于却起作用。

如果您为此问题创建一个jsFiddle将会很有帮助：http://jsfiddle.net/ - Chris Mukherjee
这是非常令人困惑的问题。 - rpasianotto
请在http://jsfiddle.net上提供一个例子。那将非常非常有帮助。 - Chris Mukherjee
@RiccardoPasianotto，你说的令人困惑是什么意思？有什么提示可以改进这个问题吗？ - Joe Half Face
你想从那个网页获取什么？ - rpasianotto
显示剩余2条评论
2个回答
2
当在任何元素上设置百分比的height时，它的直接父元素必须指定height（不是作为百分比，而是以px或em为单位）。
奇怪的例外是<html>元素，如果给它设定了height: 100%，则一个直接子元素可以使用百分比作为height（即<body>元素）。
至于设置min-height: 100%，这将把初始大小设置为100%的高度，并允许元素超过该高度。
我非常确定min-height也遵循上述height规则--对于任何以百分比设置了min-height的元素，其直接父元素必须指定height（不是作为百分比），除了<html>元素被设置为百分比的height的情况。
但是，如果一个元素将height设置为px或em值，并且它的直接子元素将height设置为百分比，则孙子元素的height可以设置为百分比，依此类推...
1
只需将 min-height: 100% 改为 height: 100%。
您的网页高度将是浏览器屏幕的100％，或内容高度的100％，以较大者为准。
是的，但如果内容实际上超过了100%的高度呢？ - Joe Half Face
默认情况下，主体的宽度为100％。我认为在CSS中没有必要设置这个。 - Nikola R.
1
谢谢，我已经点赞了，但整个问题是要将body和html设置为100％，并将#content_holder的min-height设置为100％。 - Joe Half Face
刚刚发现这个问题，设置 body html { height:100%; } 就解决了。 - Frank
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接