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

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

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


当前回答

这就是对我有用的:

<div style=“位置:固定;顶部:0px;左侧:0px,底部:0px

使用position:fixed而不是position:absolute,这样即使向下滚动分区也会扩展到屏幕的末尾。

其他回答

使用FlexBox CSS

Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名,但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中,并选择要展开的部分。它们将自动占用容器中的所有可用空间。

如果使用位置:绝对;和jQuery,您可以使用

$("#mydiv").css("height", $(document).height() + "px");

尝试以下CSS:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

最简单的方法就是这样做。

第二部分{背景:红色;高度:100vh;}正文{边距:0px;}<div></div>

如果要设置<div>或任何元素的高度,也应该将<body>和<html>的高度设置为100%。然后可以将元素的高度设置为100%:)

下面是一个示例:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}