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

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

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


当前回答

尽管这个解决方案是用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%。

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

其他回答

以下内容与您之前的回答不完全相同,但可能对某些人有所帮助:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

100vw=视口宽度的100%。

100vh=视口高度的100%。

如果要将div宽度或高度设置为浏览器窗口大小的100%,应使用:

宽度:100vw

高度:100vh

或者,如果您想将其设置得更小,请使用CSS calc函数。例子:

#example {
    width: calc(100vw - 32px)
}

尝试一下。。。

* {填充:0;边距:0;}.父目录{溢出:隐藏;清晰:两者都有;颜色:#FFF;文本对齐:居中;}.left_div{浮动:左侧;高度:100vh;宽度:50%;背景色:蓝色;}.右_右{浮动:右侧;高度:100vh;宽度:50%;背景色:绿色;}<div class=“parent_div”><div class=“left_div”>左</div><div class=“right_div”>右</div></div>

有几种方法可用于将<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>

.包装器{显示:-webkit框;显示:-ms flexbox;显示:柔性;-ms-flex-wrap:包裹;柔性包裹:包裹;高度:100vh;/*高度窗口(vh)*/}.包装器.左侧{宽度:80%;/*宽度可选,但建议使用*/}.包装器.右侧{宽度:20%;/*宽度可选,但建议使用*/背景色:#DD1F26;}<!--vw:视口宽度的百分之一。vh:视口高度的百分之一。vmin:视口宽度或高度中较小者的百分之一。vmax:视口宽度或高度中较大者的百分之一。--><div class=“wrapper”><div class=“left”>左边</div><div class=“right”>正确的</div></div>