我有一个包含两列的布局-左div和右div。

右侧的div具有灰色背景色,我需要它根据用户浏览器窗口的高度垂直展开。现在,背景色结束于该分区中的最后一段内容。

我尝试过高度:100%,最小高度:100%;,等


当前回答

你没有提到一些重要的细节,比如:

布局是否固定宽度?两列中的一列或两列的宽度是否固定?

有一种可能性:

身体第二部分{边距:0;边框:0无;填充:0;}html,身体#包装,#左侧,#权利{高度:100%;最小高度:100%;}#包装,包装{边距:0自动;溢出:隐藏;宽度:960px;/*宽度可选*/}#左侧{背景:黄色;浮动:左侧;宽度:360px;/*宽度可选,但建议使用*/}#权利{背景:灰色;左边距:360px;/*必须与以前的宽度一致*/}<html><head><title>示例</title></head><body><div id=“wrapper”><div id=“left”>左边</div><div id=“right”></div></div></body></html>

这取决于哪些柱需要固定,哪些柱是液体。您也可以使用绝对定位来实现这一点,但我通常使用浮点数来获得更好的结果(特别是在跨浏览器方面)。

其他回答

尽管这个解决方案是用jQuery完成的,但我认为它可能对任何人来说都是有用的,因为任何人都可以根据屏幕大小制作列。

对于从页面顶部开始的列,此解决方案是最简单的。

body, html {
  height: 100%;
}

div#right {
  height: 100%
}

对于不从页面顶部开始的列(例如:如果它们从页眉下方开始)。

<script>
     $(document).ready(function () {
         var column_height = $("body").height();
         column_height = column_height - 100; // 100 is the header height
         column_height = column_height + "px";
         $("#column").css("height",column_height);
    });
</script>

第一种方法将主体高度应用于它和列,这意味着starting_pixels+height100%。

第二种方法通过获取正文的高度来获取显示给用户的页面高度,然后减去页眉大小,以了解显示该列的剩余高度。

有几种方法可用于将<div>的高度设置为100%。

方法(A):

html,正文{高度:100%;最小高度:100%;}.div左{高度:100%;宽度:50%;背景:绿色;}.div右{高度:100%;宽度:50%;背景:灰色;}<div class=“div left”></div><div class=“div right”></div>

方法(B)使用vh:

html,正文{高度:100%;最小高度:100%;}.div左{高度:100vh;宽度:50%;背景:绿色;浮动:左侧;}.div右{高度:100vh;宽度:50%;背景:灰色;浮动:右侧;}<div class=“div left”></div><div class=“div right”></div>

方法(c)使用挠性箱:

html,正文{高度:100%;最小高度:100%;}.包装器{高度:100%;最小高度:100%;显示:柔性;}.div左{宽度:50%;背景:绿色;}.div右{宽度:50%;背景:灰色;}<div class=“wrapper”><div class=“div left”></div><div class=“div right”></div></div>

实际上,对我最有效的是使用vh属性。

在我的React应用程序中,我希望即使调整大小,div也能与页面高度匹配。我尝试了高度:100%;,溢出-y:自动;,但在设定高度时,它们都不起作用:(你的百分比)vh;它按预期工作。

注意:如果您正在使用填充、圆角等,请确保从vh属性百分比中减去这些值,否则会增加额外的高度并显示滚动条。这是我的示例:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

100%对于宽度和高度的作用不同。

当您指定width:100%时,意味着“从父元素或窗口的宽度中占用可用宽度的100%”

当您指定height:100%时,它只意味着“从父元素占用可用高度的100%”。这意味着如果不在顶层元素处指定高度,则所有子元素的高度将为0或父元素的高度,这就是为什么您需要将最顶层元素设置为窗口高度的最小高度。

我总是指定车身的最小高度为100vh,这使得定位和计算变得容易,

body {
  min-height: 100vh;
}

尝试此操作-已测试:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

在以后的版本中,您可以使用vh:

#right, #left {
  height: 100vh
}