2135

我有两列的布局-左div和右div。

右边div有一个灰色background-color，我需要根据用户浏览器窗口的高度垂直扩展它。现在background-color结束于该内容的最后一部分div。

我试过height:100%，min-height:100%;等

html css height

— 麦克风
source

7

可能你会发现这个问题有用stackoverflow.com/questions/1366548/...

— 伊万Nevostruev

好方法，但是vh，vw等单位已知是越野车。如果需要，可以使用这种轻量级的js替代方法：joaocunha.github.io/vunit

— 参见

以下是height带有百分比值的CSS 属性的简单明了的解释：stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

您可以使用高度：100vh；css属性

— Vishnu Chauhan '18

2830

有几个CSS 3度量单位，称为：

视口百分比（或相对于视口）长度

什么是视口百分比长度？

根据上面链接的W3候选推荐书：

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。

这些单位是vh（视口高度），vw（视口宽度），vmin（视口最小长度）和vmax（视口最大长度）。

如何使用它来使分隔符填充浏览器的高度？

对于这个问题，我们可以使用vh：1vh等于视口高度的1％。也就是说，100vh等于元素在DOM树中的位置，它等于浏览器窗口的高度：

的HTML

<div></div>

的CSS

div {
    height: 100vh;
}

这实际上就是所需要的。这是一个正在使用的JSFiddle示例。

哪些浏览器支持这些新单元？

目前，除Opera Mini之外，所有最新的主流浏览器均支持此功能。查看我可以使用...以获得更多支持。

如何与多列一起使用？

对于带有左右分隔线的当前问题，这是一个JSFiddle示例，其中显示了包含vh和的两列布局vw。

有什么`100vh`不同`100%`？

以以下布局为例：

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

p此处的标签设置为100％高度，但由于其包含的div高度为200像素，因此200像素中的100％变为200像素，而不是body高度的100％。100vh改为使用表示p标签的高度将为100％的高度，body而与div高度无关。看看这个随附的JSFiddle，可以轻松看到其中的区别！

— 詹姆斯·唐纳利
source

35

当元素实际高于视口时，滚动行为异常。容器保持视口高度，内容物从容器中流出。min-height:100vh似乎可以解决此问题。

— wdm

8

@DGDD可以在iOS Safari 6 +，Android浏览器4.4 +，BlackBerry Browser 10.0和IEMobile 10.0上使用。我不知道您指的是哪种移动浏览器，但是这4种占了所使用移动浏览器的90％以上。此问题并未指定在移动浏览器上工作的要求。

— James Donnelly 2014年

1

再次@ robross0606，这不是我在这里回答的问题。这是一个完全不同的问题，其答案的确确实使用了flexbox：stackoverflow.com/questions/90178/…–

— James Donnelly

1

@JamesDonnelly是的，我知道。但这不是这个问题的答案。浏览器窗口的高度包括导航栏的高度。这样会更好，因为在移动浏览器上，每次导航栏显示/隐藏时，视口高度都会改变。

— RedClover

3

移动设备警报：在不考虑其导航栏的Chrome移动设备上使用vh混乱。然后用它覆盖页面的顶部。一个严重的问题，如果您在那里有菜单……

— Offirmo

567

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

这是一个例子：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— Ariona Rian
source

109

如果我错了，请纠正我，但是我认为您还需要为所有div父母设定身高，才能正常工作

— Dany Y

如果我使用的是连续设计，这将无法正常工作：页面高度为6000像素，块代表页面。我希望一个块正好是视口的高度。

— Qwerty 2013年

@DanyY，你是对的。您确实需要将div的所有父级都设置为高度，这意味着所有具有屏幕高度的对象都将受到影响。这是一个例子。

— toto_tico 2014年

此技巧在某些情况下有效，但在某些情况下也无效，如果您搜索兼容性或更推荐的方式，则可以查看上面的@James答案：）使用视口百分比方法:)，这也应该起作用。欢呼声

— Ariona Rian 2014年

8

@Qwerty，这是解决方案。设置CSS像这样：html { height: 100%*number of blocks; }，body { height: 100%;}，#div { height: 100%/number of blocks; }。因此，如果您有3个部分，它将是html { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— cameronjonesweb 2014年

283

如果您能够完全定位自己的元素，

position: absolute;
top: 0;
bottom: 0;

会做到的。

— 提尼斯特
source

16

这是通过将元素从文档流中取出并将其底值固定到其父代的高度来实现的。当您的内容超过其父项的高度时，这是不理想的。

— Ricky Boyce 2014年

1

如果将其中一个的父级设置为，position:relative并且其高度不是视口的100％，那将不起作用。它将顶部和底部调整为下一个相对或绝对祖先。

— Seika85'7

141

您可以在CSS中使用视口单位：

HTML：

<div id="my-div">Hello World!</div>

CSS：

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}

— 极客先生
source

1

@Lamar您应该使用它* { box-sizing: border-box; }来防止这种情况的发生。

— 卡·斯蒂布

2

值得检查caniuse以支持视口单元上的浏览器：caniuse.com/#feat=viewport-units

— Dave Everitt

132

vh在这种情况下，您可以使用相对于视口高度的1％ ...

这意味着如果您想掩盖高度，只需使用即可100vh。

请看下面我为您绘制的图像：

试试我为您创建的代码段，如下所示：

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}

<div class="left"></div>
<div class="right"></div>

展开摘要

— 阿里雷扎
source

给定100vh会为页面添加垂直滚动条，因此遵循此滚动条但没有用。stackoverflow.com/questions/44645465/…。有什么办法可以避免垂直滚动并使div触底而没有任何内容？

— 迪利普·托马斯

@DILEEPTHOMAS看看现有的paddings/margins

— 传奇

我尝试在根文件中使用@Legends作为* {margin：0，padding：0}，但没有起作用

— DILEEP THOMAS

1

@DILEEPTHOMAS在此处查看由Alireza提供的此示例，它也具有滚动条，因为body元素具有边距。如果删除边距，则滚动条将消失。它可能有不同的原因，但是我首先要结帐。

— 传奇

101

vh与flex模型解决方案相比，所有其他解决方案（包括投票最多的解决方案）都不是最佳选择。

随着CSS flex模型的问世，解决100％高度问题变得非常非常容易：height: 100%; display: flex在父flex: 1元素和子元素上使用。他们会自动占用容器中的所有可用空间。

注意标记和CSS是多么简单。没有桌子黑客或任何东西。

所有主要的浏览器以及IE11 + 都支持 flex模型。

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

展开摘要

在此处了解有关flex模型的更多信息。

— 艾伦
source

3

提示：左/右容器中的一个容器的内容超出原始主体高度时，相对的容器将不会调整大小，因此容器的最终高度将有所不同。

— schellmax 2015年

1

Schellmax指出的问题示例：jsfiddle.net/Arete/b4g0o3pq

— Arete

根据设计，overflow-y: auto;可能会避免“容器超出原始机体高度”。

— Evi Song

54

您没有提到一些重要的细节，例如：

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

这是一种可能性：

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}

<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

展开摘要

根据需要固定的色谱柱和固定的色谱柱，可以有许多不同的选择。您也可以使用绝对定位来做到这一点，但是我通常发现使用浮点数可以得到更好的结果（特别是在跨浏览器方面）。

— 克莱图斯
source

34

这对我有用：

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

展开摘要

使用position:fixed代替position:absolute，即使您向下滚动该分区也会扩展到屏幕末端。

— 马吉达
source

带有“位置：[固定|绝对]”的代码非常适合弹出窗口的背景（例如，单击以放大图片时），但在需要真正向下滚动的情况下不太确定。仍然有用的面团！

— Mannyfatboy

29

这是固定高度的方法。

在您的CSS中使用：

#your-object: height: 100vh;

对于不支持的浏览器，请vh-units使用modernizr。

添加此脚本（以添加对的检测vh-units）

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

#your-object如果浏览器不支持，最后使用此函数将视口的高度添加到vh-units：

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

— 乔纳斯·桑德斯泰特（Jonas Sandstedt）
source

23

100% 宽度和高度的工作原理不同。

如果指定width: 100%，则表示“从父元素或窗口的宽度中获取可用宽度的100％”。

当指定时height: 100%，仅表示“占据父元素的可用高度的100％”。这意味着，如果未在顶层元素上指定高度，则所有子元素的高度将为0或父元素的高度，这就是为什么您需要将最顶层元素设置为具有min-height窗口高度的原因。

我总是将主体的最小高度指定为100vh，这使定位和计算变得容易，

body {
  min-height: 100vh;
}

— 迪内什·潘迪扬（Dinesh Pandiyan）
source

16

添加min-height: 100%并且不指定高度（或将其设置为自动）。它完全为我完成了工作：

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

— 雷木斯·西蒙（Remus Simion）
source

16

100vw ===视口宽度的100％。

100vh ===视口高度的100％。

如果要将div宽度或高度设置为浏览器窗口大小的100％，则应使用：

对于宽度： 100vw

对于身高： 100vh

或者，如果您想将其设置为较小的尺寸，请使用CSS calc函数。例：

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

— Руслан
source

12

有几种方法可以将a的高度设置<div>为100％。

方法（A）：

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

<div class="div-left"></div>
<div class="div-right"></div>

展开摘要

使用vh的方法（B）：

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}

<div class="div-left"></div>
<div class="div-right"></div>

展开摘要

使用弹性盒的方法（c）：

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}

<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

展开摘要

— Santosh Khalse
source

12

这为我工作：

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 */
}

取自此页面。

— 测试
source

12

最简单的方法是这样做。

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

展开摘要

— 艾米洛
source

11

尝试设置height:100%在html＆body

html, 
body {
    height: 100%;
}

如果要2 div高度相同，请使用或设置父元素display:flex属性。

— 穆罕默德·贾维德（Mohammed Javed）
source

9

即使这里给出了所有答案，我也惊讶地发现没有一个能真正解决问题。如果使用100vh height/ min-height，则内容长于页面时，布局将中断。如果我改用100% height/ min-height，则当内容小于页面高度时，布局将中断。

我发现解决了这两种情况的解决方案是将最上面的两个答案结合起来：

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

— 机器鬼
source

1

我有固定的90px高度导航栏，因此我只需要将您的“ 100vh”更改为“ calc（100vh-90px）”

— 马克·杰克逊

8

只需使用“ vh”单位而不是“ px”，这意味着视口高度。

height: 100vh;

— 卡利菲
source

7

默认情况下，块元素消耗其父级的全部宽度。

这就是他们满足其垂直堆叠设计要求的方式。

9.4.1块格式化上下文

在块格式设置上下文中，将框从包含块的顶部开始垂直地一个接一个地布置。

但是，此行为不会扩展到高度。

默认情况下，大多数元素都是其内容的高度（height: auto）。

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

因此，请记住以下两点：

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

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

展开摘要

— 迈克尔·本杰明
source

7

这与您之前的答案并不完全相同，但可能对某些人有帮助：

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/

— Newdark-it
source

6

使用FlexBox CSS

Flexbox非常适合此类问题。尽管Flexbox以水平方向上的内容布局而闻名，但实际上它对于垂直布局问题也同样有效。您所要做的就是将垂直部分包装在flex容器中，然后选择要扩展的部分。他们会自动占用容器中的所有可用空间。

— robross0606
source

6

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

JSFiddle示例

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

展开摘要

— 贴纸
source

6

试试看-经过测试：

body {
  min-height: 100%;
}

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

编辑：2020更新：

您vh现在可以使用：

#right, #left {
  height: 100vh
}

— 卢卡什库普斯
source

5

您可以使用display: flex和height: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

展开摘要

— Thuc阮
source

已经发布了几种flexbox解决方案，其中一个具有此确切实现的解决方案仅在此答案发布前26天发布。

— TylerH

5

您需要做两件事，一件事是将高度设置为已经完成的100％。第二是将位置设置为绝对。这应该够了吧。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

资源

— Prabhakar Undurthi
source

3

过时的解决方案。使用vh代替。

— avalanche1

1

vh如果您打算在移动设备上使用自适应设计，请不要使用。

— 亚历山大·金

5

尝试以下CSS：

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— 问题少年
source

5

实际上，最适合我的是使用 vh物业。

在我的React应用程序中，我希望div即使调整大小也要与页面高匹配。我尝试了height: 100%;，overflow-y: auto;但是设置时它们都不起作用height:(your percent)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);
}

— 吉米·Flash
source

顺便说一句，您提到了影响元素高度的“圆角”，我希望设置box-sizing: border-box;能够克服这一点，这意味着在计算元素的大小（宽度和高度）时也要考虑边框大小。

— 6

5

尝试一次...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

展开摘要

— 苏尼尔·拉杰普特（Sunil Rajput）
source

3

如果您使用position: absolute;jQuery，则可以使用

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

— 约翰·史密斯可选
source

1

不需要JavaScript。现代的解决方案是使用CSS flex box模型。

— Dan Dascalescu 2014年

如果您使用的是JS，我发现它非常有用。注意：最好将它与$（window）.load（）一起使用，因为使用F5或CTRL + F5将返回不同的结果。检查此链接以获取更多信息。stackoverflow.com/questions/13314058/…–

— 爱德华

2

的HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

的CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

— 拉姆·尼瓦斯·夏尔马
source

1

可能的拼写错误：（widht接近尾声）

— Peter Mortensen

如何使div的浏览器窗口高度为100％

视口百分比（或相对于视口）长度

什么是视口百分比长度？

如何使用它来使分隔符填充浏览器的高度？

的HTML

的CSS

哪些浏览器支持这些新单元？

如何与多列一起使用？

有什么100vh不同100%？

的HTML

的CSS

有什么`100vh`不同`100%`？