Question

我正在尝试创建一个将使用我的主content div调整大小的页面。目前，当我将content div设置为height: 1000px时，它会在我的页脚div上运行。如何对其进行更改以使其随content div扩展？

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Page Layout</title>
    <link rel="stylesheet" type="text/css" href="../styles/layout.css">
</head>
    <body>
    <div class="top">
    </div>
        <div class="left">

        </div>
        <div class="right">

            <div class="content">
                <h1>Page Content</h1>
            </div>
        </div>
        <div class="preFooter">

        </div>
        <div class="myFooter">

        </div>
    </body>
</html>

CSS：

*{
    margin-left: 0;
    margin-right: 0;

    margin-top: 0;
    margin-bottom: 0;
}

html,body { height:100%; }

h1{
    text-align: center;
    padding: 5px;
}

.left{
    float: left;
    width: 20%;
    background-color: #757475;
    height: 100%;
}

.right{
    float: right;
    width: 80%;
    background-color: #e9eaed;
    height: 100%;
}

.top{
    overflow : hidden;
    height: 10%;
    background-color: #333333;
    width: 100%;
}

.preFooter{
    overflow : hidden;
    height: 20%;
    background-color: #ffffff;
    width: 100%;
}

.myFooter{
    overflow: hidden;
    height: 40%;
    background-color: #333333;
    width: 100%;
}

.content{
    margin-top: 5%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    height: 1000px;
    border-radius: 25px;
}

Answer 1

.content的包含元素是.right，它是浮动的。浮动元素永远不会被其父元素包含。这就是它扩展到元素底部的原因。

Answer 2

请勿将高度设置为.left和.right。这样，内容将决定制作元素的高度。

Here's a JSFiddle.

它没有填满页面的整个高度的原因是因为页面上的其他元素（内容div）具有设置为1000像素的固定高度。你还必须做Rob所说的并使用一个clearfix，或者将所有浮动组合在一起并使用flexbox，这是新的和伟大的！请参见下面的第二个链接：

Here's another. I started this from scratch, maybe it will seem more straight forward this way.

页面不会随DIV扩展

2 个答案: