css - 使我的 css 框的高度液化

标签 css html

我需要你的帮助,

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

最佳答案

使用 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;
}

关于css - 使我的 css 框的高度液化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16987373/

相关文章:

html - SVG - 使路径相互平滑变形

javascript - 悬停在不同的 div 上时背景图像发生变化

javascript - 保留 SVG 文本的纵横比

javascript - 调整图像大小以适应 Div 的限制

css - 固定页眉/页脚,带边距的流动内容

用于 firefox 或 chrome 的 css 内联 hack

html - 无法将 CSS 文件连接到 HTML 文件

ruby - 使用 ruby​​ mechanize 抓取的数据大小

html - 空白在 Firefox 上不起作用

Javascript 打字机片段使浏览器没有响应