css 给定子元素高度的HTML div的精确高度

bvhaajcl  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(152)

如果父元素div的高度被设置为100%(目前就是这种情况),并且如果我降低屏幕高度,例如,最后两个子元素不能被看到,那么div是可滚动的。
现在,我不想在子元素后面有那么大的红色区域。
因此,我试图找到子元素的确切高度,以便可以相应地设置父元素的height属性。
如果我将这个高度设置为calc(5 * 1.2rem + 5 * 0.8em),不仅我最终会得到一个薄的读取区域,我希望不会看到我的计算是否足够,而且div在小高度屏幕尺寸下不能滚动。
我想div是在小高度屏幕尺寸滚动。
当屏幕高度很大时,我不想要那个红色区域。

.css_styles_1
{
  position: fixed;
  top: 0;
  left: 0;
  width: 50vw;
  overflow-x: hidden; 
  background-color: red; 
  line-height: 1rem; 
  /*height: calc(5 * 1.2rem + 5 * 0.8em);*/
  height: 100%;
}
.css_styles_2
{
  font-size: 1.2rem; 
  padding-top: 0.4em; 
  padding-bottom: 0.4em;             
}
.css_styles_2_odd
{
  background-color: aquamarine;
}
.css_styles_2_even
{
  background-color: chocolate;
}
<div class="css_styles_1">
  <div class="css_styles_2 css_styles_2_odd">Text 1</div>
  <div class="css_styles_2 css_styles_2_even">Text 2</div>
  <div class="css_styles_2 css_styles_2_odd">Text 3</div>
  <div class="css_styles_2 css_styles_2_even">Text 4</div>
  <div class="css_styles_2 css_styles_2_odd">Text 5</div>
</div>
cxfofazt

cxfofazt1#

不要设置height属性,而是尝试使用max-height: 100%。这将占用孩子的总尺寸,只要他们不超过总屏幕尺寸。

相关问题