https://jsfiddle.net/zarch/btrhuxj9/1/
我有这个文本区域和彩色框,在全屏屏幕上看起来还不错。 但是,当我减小宽度时,文本会掉出底部的框。 (您可以通过最小化jsfiddle屏幕来复制它)
如何使盒子的动态高度可以缩放?
所有这一切都是很新的,如果这是一个新手问题,请您道歉。
<label for="battery-output"></label>
<output id="battery-output" for="battery-size battery-usable" name="output">70% of ( 90% of 3.6kWh ) = 2.27kWh per day</output>
<br>
<output id="battery-output" for="battery-size battery-usable" name="output2">This will take 1.9 x 30 min charge slots (so we round up to 2 slots)</output>
</div>
.rcorners {
border-radius: 5px;
border: 1px solid #ffb347;
background-color: #ffb347;
padding: 5px;
width: 100%;
height: 60px;
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}```
尽量远离硬编码的高度。取而代之的是使用填充,让内容决定元素的高度。
jsFiddle