CSS Div拉伸100%的页面高度

我的页面左侧有一个导航栏,我希望它可以延伸到页面高度的100%。 不只是视口的高度,还包括隐藏区域,直到您滚动。 我不想使用JavaScript来完成这一点。

可以在HTML / CSS中完成吗?

下面是我使用div作为dynamic背景的容器时终于提出的解决scheme。

  • 删除非背景用途的z-index
  • leftright一个完整的高度栏。
  • 删除全宽行的topbottom

编辑1:下面的CSS已被编辑,因为它没有正确显示在FF和Chrome。 移动的position:relative对于HTML,并设置身体height:100%而不是min-height:100%

编辑2:添加额外的评论给CSS。 上面增加了一些更多的说明

CSS:

 html{ min-height:100%;/* make sure it is at least as tall as the viewport */ position:relative; } body{ height:100%; /* force the BODY element to match the height of the HTML element */ } #cloud-container{ position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; /* Remove this line if it's not going to be a background! */ } 

html:

 <!doctype html> <html> <body> <div id="cloud-container"></div> </body> </html> 

为什么?

 html{min-height:100%;position:relative;} 

如果没有这个,云容器DIV将从HTML的布局上下文中移除。 position: relative确保DIV保留在HTML框的内部,因此bottom:0指向HTML框的底部。 您还可以在云容器上使用height:100% ,因为它现在指的是HTML标记的高度,而不是视口。

使用HTML5,最简单的方法就是做height: 100vh 。 “vh”代表浏览器窗口的视口高度。 响应浏览器和移动设备的大小调整。

你可以使用仿列作弊或者你可以使用一些CSS的诡计

我有一个类似的问题,解决scheme是这样做的:

 #cloud-container{ position:absolute; top:0; bottom:0; } 

我想要一个以页面高度为100%的页面居中的div,所以我的总体解决scheme是:

 #cloud-container{ position:absolute; top:0; bottom:0; left:0; right:0; width: XXXpx; /*otherwise div defaults to page width*/ margin: 0 auto; /*horizontally centers div*/ } 

你可能需要做一个父元素(或简单的“身体”)有position: relative;

使用表格很简单:

 <html> <head><title>100% Height test</title></head> <body> <table style="float: left; height: 100%; width: 200px; border: 1px solid red"> <tbody><tr><td>Nav area</td></tr></tbody> </table> <div style="border: 1px solid green;">Content blabla... text<br /> text<br /> text<br /> text<br /> </div> </body> </html> 

当DIV被引入时,人们如此害怕桌子,使得可怜的DIV变成了隐喻性的锤子。

使用绝对位置。 请注意,这不是我们通常习惯使用绝对位置的方法,需要手动放置或浮动对话框。 当您调整窗口或内容的大小时,这将自动拉伸。 我相信这需要标准模式,但将在IE6及以上的工作。

只需用你的内容replaceid为'thecontent'的div(指定的高度只是为了说明,你不需要指定实际内容的高度。

 <div style="position: relative; width: 100%;"> <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div> <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content"> <div style="height: 10000px;" id="thecontent"></div> </div> </div> 

这样做的方式是外部div作为导航栏的参考点。 外部div由“content”div的内容展开。 导航栏使用绝对位置伸展到其父母的高度。 对于水平alignment,我们使内容div的偏移量与导航栏的宽度相同。

这对于CSS3 flex box模型来说更容易一些,但是在IE中还没有这个function,并且有一些它自己的怪癖。

如果你的目标是更现代的浏览器,生活可以非常简单。 尝试:

 .elem{ height: 100vh; } 

如果你在50%的页面上需要它,用50replace100。

我遇到了和你一样的问题。 我想做一个DIV作为背景,为什么,因为它很容易通过JavaScript操纵div。 无论如何,我在css中为那个div做了三件事。

CSS:

 { position:absolute; display:block; height:100%; width:100%; top:0px; left:0px; z-index:-1; } 
 * { margin: 0; } html, body { height: 90%; } .content { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto ; } 
 document.body.onload = function () { var textcontrol = document.getElementById("page"); textcontrol.style.height = (window.innerHeight) + 'px'; } 
 <html> <head><title></title></head> <body> <div id="page" style="background:green;"> </div> </body> </html> 

简单的,只是把它包装在一个表格div …

HTML:

 <div class="fake-table"> <div class="left-side"> some text </div> <div class="right-side"> My Navigation or something </div> </div> 

CSS:

 <style> .fake-table{display:table;width:100%;height:100%;} .left-size{width:30%;height:100%;} .left-size{width:70%;height:100%;} </style> 

我想在提示模式popup之前覆盖整个网页。 我尝试了很多使用CSS和Javascript的方法,但是直到找出下面的解决scheme之后,它们都没有帮助。 它适用于我,我希望它也可以帮助你。

 <!DOCTYPE html> <html> <head> <style> html, body { margin: 0px 0px; height 100%; } div.full-page { position: fixed; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #000; opacity:0.8; overflow-y: hidden; overflow-x: hidden; } div.full-page div.avoid-content-highlight { position: relative; width: 100%; height: 100%; } div.modal-popup { position: fixed; top: 20%; bottom: 20%; left: 30%; right: 30%; background-color: #FFF; border: 1px solid #000; } </style> <script> // Polling for the sake of my intern tests var interval = setInterval(function() { if(document.readyState === 'complete') { clearInterval(interval); isReady(); } }, 1000); function isReady() { document.getElementById('btn1').disabled = false; document.getElementById('btn2').disabled = false; // disable scrolling document.getElementsByTagName('body')[0].style.overflow = 'hidden'; } function promptModalPopup() { document.getElementById("div1").style.visibility = 'visible'; document.getElementById("div2").style.visibility = 'visible'; // disable scrolling document.getElementsByTagName('body')[0].style.overflow = 'hidden'; } function closeModalPopup() { document.getElementById("div2").style.visibility = 'hidden'; document.getElementById("div1").style.visibility = 'hidden'; // enable scrolling document.getElementsByTagName('body')[0].style.overflow = 'scroll'; } </script> </head> <body id="body"> <div id="div1" class="full-page"> <div class="avoid-content-highlight"> </div> </div> <button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button> <div id="demo"> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> </div> <div id="div2" class="modal-popup"> I am on top of all other containers <button id="btn2" onclick="closeModalPopup()" disabled>Close</button> <div> </body> </html>