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

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

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


当前回答

默认情况下,块元素使用其父元素的整个宽度。

这就是它们如何满足垂直堆叠的设计要求。

9.4.1块格式化上下文在块格式化上下文中,垂直,从包含块的顶部开始。

然而,这种行为不会延伸到高度。

默认情况下,大多数元素都是其内容的高度(高度:auto)。

与宽度不同,如果需要额外空间,则需要指定高度。

因此,请记住以下两点:

除非需要全宽,否则需要定义块元素的宽度除非需要内容高度,否则需要定义元素的高度

.联系人{显示:flex;/*默认情况下为全宽*/最小高度:100vh;/*至少使用视口的全高度*/}.左侧{弹性:0 0 60%;背景色:番茄;}.对{挠曲:1;背景色:粉色;}body{margin:0;}/*删除默认边距*/<div class=“联系人”><section class=“left”><div class=“”><h1>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</h1></div></section><section class=“right”><img/></section></div>

其他回答

这对我有用:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

摘自本页。

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

下面是一个示例:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

这就是对我有用的:

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

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

其中一个选项是使用CSS表。它具有强大的浏览器支持,甚至可以在Internet Explorer 8中工作。

JSFiddle示例

html,正文{高度:100%;边距:0;}.容器{显示:表格;宽度:100%;高度:100%;}.左,.右{显示:表格单元格;宽度:50%;}.对{背景:灰色;}<div class=“container”><div class=“left”></div><div class=“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);
}