css - 如何用浮动设置高度？

Question

我需要设置height:100%。这是我的代码：

#wrapper{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 50px 10px 0 0 !important;
    /*border: 1px solid red;*/
}

#left-side{
    border: 1px solid red;
    float: left;
    background-color: #FFFFFF;
    height: 100%;
    margin: 0 20px 0 10px;
    width: 200px;
}
#right-side{
    border: 1px solid green;
}

<body>
    <div id="wrapper">
        <div id="left-side">
            lol
        </div>
        <div id="right-side">
            <!-- squares -->
        </div>
    </div>
</body>

哪里有问题？

score 0 · Accepted Answer

我已经对 CSS 进行了一些编辑。检查这是否是你需要的

#wrapper{
    width: 1000px;
    margin: 0 auto;
    padding: 50px 10px 0 0 !important;
    /*border: 1px solid red;*/
}

#left-side{
    position:relative;
    border: 1px solid red;
    float: left;
    background-color: #FFFFFF;
    margin: 0 20px 0 10px;
    width: 200px;
}

#right-side{
    width:600px;
    float:right;
    border: 1px solid green;
}

score 0 · Accepted Answer

当您使用百分比时，它是相对于它的父级的。您#wrapper有一个body没有定义高度的父级 ( )。

在您的 CSS 中，添加：

    html, body { height: 100% }

现在你#wrapper可以与它的父母联系起来。这是因为html有浏览器窗口作为它的父级，body html作为它的父级等等。

演示小提琴

score 0 · Accepted Answer

如果您的目标是简单地拥有相等高度的列，则这些display: table属性非常适用：

#wrapper{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 50px 10px 0 0 !important;
    /*border: 1px solid red;*/
    display: table; /* here */
}

#left-side{
    border: 1px solid red;
    display: table-cell; /* replaces the float */
    background-color: #FFFFFF;
    height: 100%;
    margin: 0 20px 0 10px;
    width: 200px;
}
#right-side{
    border: 1px solid green;
    display: table-cell; /* here */
}

http://jsfiddle.net/VTCxs/

如果您的目标是简单地防止图像 in#right-side流动#left-side，那么您需要添加等于 to 宽度的边距或#right-side填充#left-side。

score 0 · Accepted Answer

如果 100% 的高度应该意味着全屏，则必须将 html 和 body 标签设置为 100%，以确保包装器确实包装了嵌套容器，您必须为包装器元素添加浮动中断.

html,body {
 height:100%;
}

#wrapper{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 50px 10px 0 0 !important;
    border: 1px solid blue;
}

#wrapper:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;

}

这是一个小演示。马上你就会得到一个滚动条，因为你的包装器有 100% 的高度加上 50px 顶部的填充。

css - 如何用浮动设置高度？

4 回答 4

Related

Reference