Question

我发现在height: 100%内部的元素上使用div时，除非包含它的div是固定高度，否则它不起作用。

HTML

<div id='header' class='bodyRect'>
    <div id='welcome'>
        <h1>This is a welcome message</h1>
        <p>Welcome to this website.</p>
        <p>It is websitey.</p>
        <p>Click <a id='toggle' href='#'>here</a> to toggle fixed vs 100% height to see the problem.</p>
    </div>
    <div id='logo'></div>
    <span class='clearfix'></span>
</div>

CSS

body {
    text-align: center;
}
.bodyRect {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
}
#welcome {
    width: 70%; float: left
}
#logo {
    width: 30%; float: right;
    background-color: red;
    height: 100%;
}
.clearfix {
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

JS（用于测试;它在固定高度和非固定高度之间切换，以便您可以看到问题）

var fixedHeight = false
document.getElementById('toggle').onclick = function(e) {
    e.preventDefault()
    fixedHeight = !fixedHeight
    var newHeight = fixedHeight ? '500px' : '100%'
    alert('height is now ' + newHeight)
    document.getElementById('logo').style.height = newHeight
}

正如您在小提琴和此代码中看到的那样，如果父div具有固定的div，则子div将仅展开以填充父height属性。

但是，我不想使用固定的高度。我希望父div的高度能够改变。如何在不使用父级固定高度的情况下让我的孩子div展开以填充父级？

Answer 1

实现这一目标的唯一方法是将子div从文档流中取出。

将父级设置为position:relative;，将子级设置为position:absolute;

在这里演示：http://jsfiddle.net/9gePs/

Answer 2

.childDiv{
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}

如果父母有相对位置，那将在所有方向上将其扩展到100％。

Answer 3

可能不是您正在寻找的理想答案，但使用了一些 jQuery ：

$(function(){
      var logo_height_percent = 100;  //<-- set the percent here
      $('#logo').height($('#header').height() * logo_height_percent/100);
});

jsFiddle here

在没有高度属性的元素中使用100％高度

3 个答案: