我想设置高度与容器相同的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;
}
也许更容易做到没有？
我想设置高度与容器相同的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;
}
这是小提琴
干杯!