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

我想设置高度相同的2列div 容器

由于你的容器有height:100%，我认为你想要你孩子div的

为你的HTML和身体提供100％的身高
```
html,body{
 height:100%
} 
```

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

#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容器内有两列div

1 个答案: