0

我需要你的帮助，

如何修改下面的现有代码，以便我的 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>
4

3 回答 3

0

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

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;
}
于 2013-06-07T16:45:32.707 回答
0

删除固定高度并给出overflow:hidden

于 2013-06-07T16:46:15.973 回答
0

看看 Filament 的 jQuery Equal Heights 插件：

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

初始化它：

$('#container div').equalHeights();
于 2013-06-07T16:04:16.723 回答