我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
只需使用“vh”单位而不是“px”，这意味着查看端口高度。
height: 100vh;
其他回答
你没有提到一些重要的细节，比如：
布局是否固定宽度？两列中的一列或两列的宽度是否固定？
有一种可能性：
身体第二部分{边距：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>
这取决于哪些柱需要固定，哪些柱是液体。您也可以使用绝对定位来实现这一点，但我通常使用浮点数来获得更好的结果（特别是在跨浏览器方面）。
100vw=视口宽度的100%。
100vh=视口高度的100%。
如果要将div宽度或高度设置为浏览器窗口大小的100%，应使用：
宽度：100vw
高度：100vh
或者，如果您想将其设置得更小，请使用CSS calc函数。例子：
#example {
width: calc(100vw - 32px)
}
最简单：
html，正文{高度：100%；最小高度：100%；}正文{位置：相对；背景：紫色；边距：0；填充：0；}.全高{显示：块；位置：相对；背景：红色；高度：100%；宽度：300px；}<html class=“”><body><div class=“fullheight”>这是全高。</div></body></html>
100%对于宽度和高度的作用不同。
当您指定width:100%时，意味着“从父元素或窗口的宽度中占用可用宽度的100%”
当您指定height:100%时，它只意味着“从父元素占用可用高度的100%”。这意味着如果不在顶层元素处指定高度，则所有子元素的高度将为0或父元素的高度，这就是为什么您需要将最顶层元素设置为窗口高度的最小高度。
我总是指定车身的最小高度为100vh，这使得定位和计算变得容易，
body {
min-height: 100vh;
}
最简单的方法就是这样做。
第二部分{背景：红色；高度：100vh；}正文{边距：0px；}<div></div>
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
