Question

我需要你的帮助，

如何修改下面的现有代码，以便我的css框的高度被液化（因为它需要以这种方式调整到我的用户屏幕分辨率的高度）？

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
* { margin:0; padding: 0 }
#container {
    width: 100%;
    margin: 0 auto;
}

#primary {
    float: left;
    width: 10%;
    background: red;
    height: 600px;
}

#content {
    float: left;
    width: 80%;
    background: blue;
    height: 600px;
}

#secondary {
    float: left;
    width: 10%;
    background: green;
    height: 600px;
}


</style>

</head>

<body>
<div id="container">


    <div id="primary">
        <p>left</p>
    </div>


    <div id="content">
        <p>center</p>
    </div>


    <div id="secondary">
        <p>right</p>
    </div>


</div>
</body>

</html>

Answer 1

看看Filament的jQuery Equal Heights插件：

https://github.com/filamentgroup/jQuery-Equal-Heights

初始化：

$('#container div').equalHeights();

Answer 2

使用表*显示属性可以轻松实现等高列。

http://cssdeck.com/labs/2iy6anjy

#container {
    display: table;
    width: 100%;
    margin: 0 auto;
}

#primary {
    display: table-cell;
    width: 10%;
    background: red;
}

#content {
    display: table-cell;
    width: 80%;
    background: blue;
}

#secondary {
    display: table-cell;
    width: 10%;
    background: green;
}

Answer 3

删除固定高度并提供overflow:hidden

使我的css盒的高度液化

3 个答案: