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>

问题出在哪里？

Answer 1

我已经编辑了一下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;
}

Answer 2

使用百分比时，它与父母的相对。您的#wrapper的父级（body）没有定义的高度。

在你的CSS中，添加：

    html, body { height: 100% }

现在你的#wrapper可能与它的父母有关。这是因为html的浏览器窗口为父级，body html为父级，依此类推。

Demo fiddle

Answer 3

如果你的目标只是拥有相同的高度列，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/

如果您的目标只是阻止#right-side中的图片流过#left-side，那么您需要添加一个等于#right-side宽度的边距或填充到{ {1}}。

Answer 4

如果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;

}

Here is a small demo。在一瞬间，你将永远得到一个滚动条，因为你的包装器的高度为100％加上50px顶部的填充。

如何用浮子设置高度？

4 个答案: