使div 100％的浏览器窗口的高度
我有一个两列的布局 – 左边的div和右边的div 。
正确的div有一个灰色的background-color ，我需要它根据用户的浏览器窗口的高度垂直扩大。 现在， background-color在该div的最后一部分内容结束。
我试过height:100% ， min-height:100%; 等等
有几个相对较新的CSS3度量单位称为：
视口 – 百分比（或视口相对）长度
什么是视口 – 百分比长度？
从上面链接的W3候选build议书：
视口百分比长度是相对于初始包含块的大小。 当初始包含块的高度或宽度发生变化时，会相应地缩放。
这些单位是vh （视口高度）， vw （视口宽度）， vmin （视口最小长度）和vmax （视口最大长度）。
这怎么可以用来使分隔符填充浏览器的高度呢？
对于这个问题，我们可以使用vh ： 1vh等于视口高度的1％。 也就是说， 100vh等于浏览器窗口的高度，而不pipe元素在DOM树中的位置：
HTML
<div></div>
CSS
div { height:100vh; }
这实际上是所有需要的。 这是一个使用JSFiddle的例子 。
什么浏览器支持这些新的单位？
目前除了Opera Mini以外，所有最新的主stream浏览器都支持此function。 退房我可以使用…进一步的支持。
这怎么可以用于多列？
在手边的问题中，以左右分隔符为例 ，这里是一个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包含200px的高度，所以200px的100％变成200px， 而不是 100％的身高。 使用100vh代替意味着p标签将是body 100％身高，不pipediv高度。 看看这个伴随小提琴轻松看到不同之处！
如果要设置<div>或任何元素的高度，则应将<body>和<html>的高度设置为100％。 那么你可以用100％来设置元素的高度:)
这里是一个例子：
body, html { height: 100%; } #right { height: 100%; }
如果你能够绝对定位你的元素，
position: absolute; top: 0; bottom: 0;
会做到这一点。
您可以在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*/ }
与Flex模型解决scheme相比，所有其他解决scheme（包括顶级投票的解决scheme）都是次优的。
随着CSS flex模型的出现，解决100％高度问题变得非常简单：使用height: 100%; display: flex 在父元素上height: 100%; display: flex ，在子元素上height: 100%; display: flex flex: 1 。 他们会自动占用其容器中的所有可用空间。
注意标记和CSS是多么简单。 没有表黑客或任何东西。
所有主stream浏览器和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>
你不提到一些重要的细节，如：
- 布局是否固定宽度？
- 是一个或两个列固定宽度？
这是一个可能性：
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>
这是一个高度的修复。
在你的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; });
最后，如果浏览器不支持vh-units使用这个函数将视口的高度添加到#your-object ：
$(function() { if (!Modernizr.cssvhunit) { var windowH = $(window).height(); $('#your-object').css({'height':($(window).height())+'px'}); } });
这对我来说是有效的：
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>
使用position:fixed而不是position:absolute ，即使您向下滚动除法将展开到屏幕的结尾。
添加min-height: 100% ，不要指定高度（或放在自动）。 它完全为我做了这个工作：
.container{ margin: auto; background-color: #909090; width: 60%; padding: none; min-height: 100%; }
这对我工作：
html, body { height: 100%; /* IMPORTANT!!! stretches viewport to 100% */ } #wrapper { min-height: 100%; /* min. height for modern browser */ height:auto !important; /* important rule for modern Browser */ height:100%; /* min. height for IE */ overflow: hidden !important; /* FF scroll-bar */ }
采取从这页 。
有几种方法可以将<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>
尝试在html和body设置height:100%
html, body { height: 100%; }
如果你想要2个div高度相同的使用或设置父元素display:flex属性。
在这种情况下，可以使用vh相对于视口高度的1％。
这意味着如果你想掩盖高度，只需使用100vh 。
看看我在这里画的图像：
试试我为你创build的代码片段如下：
.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>
使用FlexBox CSS
Flexbox非常适合这类问题。 虽然大多数人都知道在水平方向上布置内容，但Flexbox实际上也适用于垂直布局问题。 所有你需要做的是将垂直部分包裹在一个柔性容器中，并select你想要展开的部分。 他们会自动占用其容器中的所有可用空间。
100vw ===视口宽度的100％。
100vh ===视口高度的100％。
如果你想设置浏览器窗口大小的div宽度或高度的100％，你应该使用
宽度： 100vw
对于身高： 100vh
或者如果你想设置它更小的尺寸使用CSS calc function 。 例：
#example { width: calc(100vw - 32px) }
其中一个选项是使用CSS表格。 它有很好的浏览器支持，甚至在IE8中工作。
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>
你需要做两件事，一件是把你已经做的高度设置为100％。 其次是绝对的立场。 这应该够了吧。
html, body { height: 100%; min-height: 100%; } position: absolute;
资源
您可以使用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>
如果你使用position: absolute; 和jQuery，你可以使用
$("#mydiv").css("height", $(document).height() + "px");
试试这个 – testing：
body { min-height: 100%; } #right, #left { height: 100%; }
块元素默认情况下会消耗父级的全部宽度。 这是他们如何满足他们的devise要求，即垂直堆叠。
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>
尝试下面的CSS：
html { min-height: 100%; margin: 0; padding: 0; } body { height: 100%; } #right { min-height: 100%; }
您可以使用JavaScriptdynamic计算浏览器中的高度。 例如，使用CSSOBJ库提供的CSS-IN-JS技术。
演示： https ： //cssobj.github.io/cssobj-demo/
即使这个解决scheme是使用jQuery I完成的，但是对于任何需要使用列来适应屏幕大小的人来说，这可能都是有用的。
对于从页面顶部开始的列，此解决scheme是最简单的。
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>
第一种方法应用身体的高度，以及列，这意味着是height100% + height100% 。
第二种方法通过获取主体的高度来获得向用户显示的页面的高度，然后减去标题大小以知道显示列的剩余高度。
最简单的：
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>
做这个：
body { margin: 0; padding: 0; font-family: sans-serif; } .left, .right { width: 50%; } .left { background: #f0f0f0; } .right { background: #cccccc; color: #2e2e2e; position: fixed; right: 0; top: 0; bottom: 0; }
<div class="left"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor lorem, sed auctor tellus efficitur id. </p> <p> Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas. </p> <p> Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est. </p> <p> Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus sem, vestibulum at felis et, finibus egestas sem. </p> <p> Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl. Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor lorem, sed auctor tellus efficitur id. </p> <p> Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas. </p> <p> Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est. </p> <p> Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus sem, vestibulum at felis et, finibus egestas sem. </p> <p> Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl. Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim. </p> </div> <div class="right"> THIS IS RIGHT </div>
Here is something that is not exactly like what you had above but could be helpful to some.
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; }
尝试
max-width: 5000px;
min-width: 1px;
This should help just making the <div> as big as the browser window.
