填充高度超过100％

Question

我想这样的代码：

的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>视为动态内容，例如可能会增长。

感谢

Answer 1

您可以在右侧的父母使用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>