填充高度超过100%
问题描述:
我想这样的代码:填充高度超过100%
的HTML:
<div id="cnt">
<div id="left">
I'm left
</div>
<div id="right">
I'm right
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
</div>
</div>
的CSS:
html,body,#cnt{
height:100%;
}
#left {
background: #990000;
float: left;
width: 100px;
height: 100%;
}
#right {
margine-left: 100px;
background: #009900;
}
的问题:如何使left
DIV延伸高度为right
DIV延伸?
将<br>
视为动态内容,例如可能会增长。
感谢
答
您可以在右侧的父母使用flex
,然后flex-grow: 1
,使其充满可用空间。默认情况下,此Flex行中的左/右列将具有相同的高度。
(顺便说一句,你拼错margin-right
上#right
)
body {margin:0;}
#cnt {
/* use min-height if you want the content to be at least the window height;
/* min-height: 100vh; */
display: flex;
}
#cnt {
display: flex;
}
#left {
background: #990000;
}
#right {
flex-grow: 1;
background: #009900;
}
<div id="cnt">
<div id="left">
I'm left
</div>
<div id="right">
I'm right
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
</div>
</div>
好了,这是不工作...颜色不填,你不明白吗? – mizzo
看看:https://jsfiddle.net/2v3ayywx/1/ – mizzo
@mizzo它是你使用'height'并且你在'#left'上留下了'float'东西https://jsfiddle.net/2v3ayywx/ 2/ –