.getsmaller {
display: block;
width: 1000px;
height: 150px;
background: red;
}
<div class='getsmaller'></div>
<div class='additions'>
Lorem ipsum dolor sit amet
</div>
在这里的HTML
结构中,如何根据.additions
使height
变小?
例如,正如第一个例子中所写的那样,它在一行中,现在我想在它超过一行时发生的是使.getsmaller
高度变小并将.addition
移得更高,像这样。
.getsmaller {
display: block;
width: 1000px;
height: 120px;
background: red;
}
<div class='getsmaller'></div>
<div class='additions'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
为了清除它,我想保持.addition
在它的位置上,让它变得更高,而不是向下移动。但只改变.getsmaller
的高度
你可以像这样使用 flex:
body { /* I used the body as the main container but it can be any other element*/
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.getsmaller {
flex: 1; /* this will make the div take the remaining spaces so it will get smaller when the cotnent of the other grow*/
background: red;
}
<div class='getsmaller'></div>
<div class='additions'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>