CSS Div拉伸100％的页面高度
我的页面左侧有一个导航栏，我希望它可以延伸到页面高度的100％。 不只是视口的高度，还包括隐藏区域，直到您滚动。 我不想使用JavaScript来完成这一点。
可以在HTML / CSS中完成吗？
下面是我使用div作为dynamic背景的容器时终于提出的解决scheme。
- 删除非背景用途的
z-index。 -
left或right一个完整的高度栏。 - 删除全宽行的
top或bottom。
编辑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>
