Question

这是一个示例布局：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Dynamic DIV</title>
    <style>
        #header {
            background: green;
        }
        #header * {
            vertical-align: middle;
        }
        button {
            float: right;
        }
        #top {
            background: yellow;
        }
        #bottom {
            background: aqua;
        }
    </style>
</head>

<body>
    <div id="header">
        <label for="checker">Check</label>
        <input type="checkbox" id="checker">
        <label for="slider">Slider</label>
        <input type="range" id="slider"><span>Some text</span>
        <button type="button">Bar</button>
        <button type="button">Foo</button>
    </div>
    <div id="content">
        <div id="top">Top content</div>
        <div id="bottom">Bottom content</div>
    </div>
</body>

</html>

演示：http://jsfiddle.net/CZt36/1/

如何将content DIV扩展到页面的其余部分，以便top和bottom DIV获得content DIV高度的50％？

注意：我不想支持旧浏览器或使用某些类似帖子中提到的JavaScript。

Answer 1

height:100%表示填充父元素的所有高度。在您的情况下，内容的父元素是body，因此您需要首先100％;然后100％专利，即html。然后给标题增加一些高度，如10％，然后停留到内容，这样它就可以占据身体的所有其余部分，然后占据内容的子元素的50％。更新了小提琴

将此添加到您的css

   #header
    {
        background:green;
        height:10%
    }

    html,body
    {
        height:100%;
        margin:0px;
    }

    #content
    {
        height:90%;
    }
    #top,#bottom
    {
       height:50%
    }

JSFiddle：http://jsfiddle.net/CZt36/5/

灵活的布局覆盖页面的其余部分，并将儿童的高度分成两半

1 个答案: