小开

如果你能够绝对定位你的元素，

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

会这样做。

小开

你没有提到一些重要的细节，比如：

布局是否固定宽度？
列的宽度是固定的吗？

这里有一个可能性：

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>

这有许多变化，具体取决于哪些列需要固定，哪些列是流动的。您也可以使用绝对定位来执行此操作，但我通常使用浮点数找到更好的结果（特别是在跨浏览器方面）。

小开

添加min-height: 100%，不要指定高度（或设置为自动）。它完全为我做了工作：

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

小开

如果您想设置<div>或任何元素的高度，您也应该将<body>和<html>的高度设置为100%。然后您可以将元素的高度设置为100%：）

下面是一个例子：

body, html {height: 100%;}
#right {height: 100%;}

小开

试试这个-测试：

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

编辑：2020更新：

您现在可以使用vh：

#right, #left {height: 100vh}

小开

尽管这个解决方案是用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 heightcolumn_height = column_height + "px";$("#column").css("height",column_height);});</script>

第一种方法将主体高度应用于它和列，这意味着starting_pixels+height100%。

第二种方法通过获取正文的高度来获取显示给用户的页面高度，然后减去标题大小以知道还剩下多少高度来显示列。

小开

有几个CSS 3测量单位称为：

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

什么是视口百分比长度？

来自上面链接的W3候选人建议：

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

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

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

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

超文本标记语言

<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标签将是body高度的100%，而不管div的高度如何。看看这个随附jsfiddle就很容易看出区别了！

小开

这对我有效：

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

取自此页面。

小开

与弹性模型解决方案相比，所有其他解决方案，包括投票最多的vh解决方案，都是次优的。

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

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

flex模型是支持所有主流浏览器以及IE11+。

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>

了解更多关于弹性模型这里。

小开

这是什么为我工作：

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

Use position:fixed instead of position:absolute, that way even if you scroll down the division will expand to the end of the screen.

小开

这是一个固定的高度。

在您的CSS使用中：

#your-object: height: 100vh;

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

添加此脚本（为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;});

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

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

小开

如果你使用position: absolute;和jQuery，你可以使用

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

小开

最简单：

html,body {height: 100%;min-height: 100%;}body {position: relative;background: purple;margin: 0;padding: 0;}.fullheight {display: block;position: relative;background: red;height: 100%;width: 300px;}

<html class="">
<body><div class="fullheight">This is full height.</div></body>
</html>

小开

使用FlexBox CSS

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

小开

你需要做两件事情，一是将高度设置为100%，你已经做过了。第二是将位置设置为绝对。这应该可以做到。

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

来源

小开

其中一个选项是使用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>

小开

尝试在html和body中设置height:100%

html,body {height: 100%;}

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

小开

您可以在CSS中使用view端口单元：

超文本标记语言：

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

css：

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

小开

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

方法（B）使用vh：

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）使用flex box：

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>

小开

尝试以下CSS：

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

小开

在这种情况下，您可以使用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>

小开

以下是一些与您之前的答案不完全相同的内容，但它可能对某些人有所帮助：

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

或者如果您想将其设置为较小的大小，请使用CSScalc函数。示例：

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

小开

默认情况下，块元素使用其父元素的全部宽度。

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

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>

小开

您可以使用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>

小开

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

height: 100vh;

小开

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

<!--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>

小开

这个东西会根据内容自动调整高度你的浏览器。我希望这对你有用。试试这个例子如下所示

您只需要设置height:100%。

html,body {height: 100%;margin: 0;}.content {height: 100%;min-height: 100%;position: relative;}.content-left {height: auto;min-height: 100%;float: left;background: #ddd;width: 50%;position: relative;}
#one {background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;width: 50%;position: relative;float: left;}
#two {background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;width: 50%;float: left;position: relative;overflow-y: scroll;}

<div class='content' id='one'></div><div class='content-left' id='two'></div>

小开

实际上，最适合我的是使用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);}

小开

您可以使用以下CSS使div达到浏览器窗口高度的100%：

display: block;position: relative;bottom: 0;height: 100%;

小开

100%对宽度和高度的作用不同。

当您指定width: 100%时，它表示“占用父元素或窗口宽度的100%可用宽度”。

当你指定height: 100%时，它只意味着“占用父元素100%的可用高度”。这意味着如果你不指定顶层元素的高度，所有子元素的高度将是0或父元素的高度，这就是为什么你需要将最顶层的元素设置为窗口高度的min-height。

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

body {min-height: 100vh;}

小开

试一次…

*{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>

小开

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

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

<div></div>

小开

愚蠢简单的解决方案其中支持跨域和支持浏览器大小调整。

<div style="height: 100vh;"><iframe src="..." width="100%" height="80%"></iframe></div>

根据需要调整ifram#0属性（将divheight属性保留为100vh）。

为什么是80%？在我的真实场景中，我在div中有一个标题，在iframe之前，它消耗了一些垂直空间-所以我将iframe设置为使用80%而不是100%（否则它将是包含div的高度，但从标题之后开始，并溢出div的底部）。

小开

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

我找到的解决方案，解决了这两种情况，是将前两个答案结合起来：

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

小开

整页称为视口，您可以根据CSS3中的视口设计元素。

这样的单位被称为视口百分比长度，并且相对于初始包含块的大小。

Viewport-Height称为vh。页面的完整高度是100vh。
Viewport-Width称为vw。页面的完整高度是100vw。
还有vmin（视口最小长度）和vmax（视口最大长度）。

所以现在，你的问题可以通过在CSS中添加以下内容来轻松解决：

.classname-for-right-div /*You could also use an ID*/ {height: 100vh;}

信息关于视口相对长度

小开

现在使用高度：100vh；对于固定窗口高度

<style>.header-top{height:100vh; background:#000; color:#fff;display:flex;align-items:center;padding:10px; justify-content: space-around;}.header-top ul{list-style:none;padding:0; margin:0;display:flex;align-items:center;  }.header-top ul li{padding:0px 10px;}</style><div class="header-top"><div class="logo">Hello</div><ul><li>Menu</li><li>About Us</li><li>Contact US</li><li>Login</li></ul></div>

小开

如果将html和主体高度设置为100%，则它将覆盖整个页面如果您将任何特定的div最小高度设置为100%，则它将像这样覆盖整个窗口：

css

html,body{height:100%;}
div#some-div{min-height:100%;
}

记住

只有当div的直接父级是body时，这才有效，因为百分比总是从直接父级继承的，并且通过执行上面的css代码，你告诉div从直接父级（body）继承高度100%并使其成为你的最小高度：100%

另一种方式

简单地将div高度设置为100vh，它的平均100视口高度