div 容器内的两列 divs

Question

我想将 2 列 div 设置为与容器高度相同（当然不使用 px）

HTML

<body>
<div id="container">
    <div id="hdr-lay">
    Header
    </div>

    <div id="left-column">
    Grid Layout left
    </div>

    <div id="right-column">
    Grid Layout right
    </div>
</div>
</body>

CSS

#hdr-lay {
    _background-color: red;
}

#container {
    background-color: gray;
    height:100%;
    width:100%;
}

#left-column {
    float: left;
    background-color: red;
    border: 1px;
    width: 70%;
}

#right-column {
    float: left;
    width: 30%;
    background-color: blue;
    display: block;
}

http://jsfiddle.net/g3gxv4j2/

也许不做会更容易？

Answer 1

I would like to set the 2-columns divs with the same height than container

因为你的容器有 height:100%，我假设你想要你的 child div 的

为您的 html 和 body
提供 100% 高度
```
html,body{
 height:100%
} 
```

您已为容器设置 height:100%。这只会将其高度扩展到其内容的 100%（内容本身不会达到 100% 的高度）。让您的左右列 从它们的 parent 容器继承高度 。

#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
height:inherit;
}

#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
height:inherit;
}

这是fiddle

干杯！

div 容器内的两列 divs

Two columns divs inside a div container

html

css

layout