假设一个例子:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body  { height:100%; width:100%; padding:0; margin:0; }
        body        { overflow:scroll; }
        #wrapper    { background:#5f9ea0; width:500px; height:100%; min-height:100%; margin:0 auto; overflow:auto; }
        #content    { background:#336699; width:400px; height:100%; min-height:100%; margin:0 auto; overflow-x:hidden; position:relative;}
        #info-block { background:#d2691e; width:300px; left:20px; position:absolute; }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <div id="info-block">Info..<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>...End</div>
        </div>
    </div>
</body>
</html>

这个例子有几个问题:

  1. 它将滚动条放置在错误的位置#content而不是body
  2. body#wrapper#content都将计算出适当的高度。 预期为522px而不是227px (下面的截图)。

实际内容的高度为522px计算出的高度为227px,这是错误的

所以实际的问题是我需要页面来获取#info-block元素的内容高度。 尝试了不同的设置,都失败了。

一种有效的解决方案-使用jQuery并将#info-block的高度与body的高度进行比较,然后将其递归地应用于body#wrapper#content 但这是错误的。 寻找仅CSS解决方案。

而且,我无法摆脱position:absolute #info-block元素的position:absolute属性,因为它是交互式水平手风琴的一部分。

提前致谢。

#1楼 票数:0

在另一个Stackoverflow线程中提出了类似的问题,我将链接该线程供您查看。

最小高度为100%且不继承身高的父母内部的孩子

看来您无法通过min-height继承Chrome / Safari / Firefox中的高度。 也许是问题所在? 线程中有jQuery问题解决,还有人报告display:block; 应该解决问题。

看一看!

  ask by Aleksandr Makov translate from so

未解决问题?本站智能推荐:

2回复

位置:绝对和高度

我有这个例子http://jsfiddle.net/HnfCU/我使用jQuery来显示和隐藏.child div 。 .child绝对定位于.parent我试图解决的问题是.child的高度。 我想要.child的背景来覆盖它的整个区域。 现在,使用height:100%它部分覆盖它。
1回复

位置固定和高度自动的解决方案

这是我的代码的类似示例。 这样它工作得很好。 但是,我不想在 div .all-content 上确定 height:500px 因为这个 div 会有不同的高度,这取决于我在那里放了多少帖子/文本。 附: 在固定 div 上,我有不同高度的标签,具体取决于里面有多少帖子如果我删除 height:5
1回复

绝对位置和百分比高度

请参考http://jsfiddle.net/A2Qnx/1/ 启用绝对定位后,div P的高度为60px(距离父级50像素+填充10像素)。 现在,如果您关闭绝对定位,则div P和div W的高度将相同,为110px(子级为100,填充为10)。 有人可以告诉我这里发生了什么吗?
1回复

绝对位置的高度不起作用,并且停止jQuery工作(示例)

看看这个请http://jsfiddle.net/xhpqa/4/如果鼠标悬停在sub_menu div上,它会一直隐藏,因为它没有高度(如果我没有指定height或min-height和max-height,则内容会扩展扩大)
6回复

相对div高度

我想将视图分为四个部分。 顶部的标题,使用整页宽度和固定高度。 剩下的页面被分成两个相同高度的块,它们的上面包含两个相同大小的块,彼此相邻。 我尝试的是(没有标题): #wrap { width: 100%; height: 100%;}#block12 { width: 100
2回复

获取高度以在绝对模式下定位div

当我最后一个问题得到立即回答时..我决定发布一个新的XD,该问题将使我的头发全掉。 这就是问题.. 我有一个绝对位置div的设计。它有一个透明的png和一个简单的锚点...就像这样。 所以..我需要将这个div.buyfloat放置在绝对位置...不要四处移动..不跳不衰..我只需要
1回复

宽度和高度如何处理位置:相对、绝对、固定?

CSS width和height属性如何处理位置: relative 、 absolute 、 fixed ? 我的意思是: width和height是相对于它们定义的元素的测量值? 要么 width和height是相对于元素父元素的测量值?
2回复

具有自动高度的相对元素

我想自动高我的相对定位Div并且不想使用“overflow:scroll / auto”。 当Childelement需要空间时我只想提高我的Div的高度.. #content { position: relative; background: red; z-index: 1; rig