div容器内有两列div

我想设置高度与容器相同的2列div(当然不使用px)

HTML

    

    Header
    

    

    Grid Layout left
    

    

    Grid Layout right
    

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/

也许更容易做到没有？

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

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

给你的html和body增加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;
}

这是小提琴

干杯!