211

我的页面左侧有一个导航栏，我希望它可以拉伸到页面高度的 100%。不仅是视口的高度，还包括在您滚动之前隐藏的区域。我不想使用 javascript 来实现这一点。

可以用 HTML/CSS 完成吗？

4

13 回答 13

187

这是我在使用 div 作为动态背景的容器时最终想到的解决方案。

  • 删除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 标记的高度，而不是视口。

于 2012-05-17T16:12:33.747 回答
88

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

于 2014-11-12T20:27:58.127 回答
14

我有一个类似的问题，解决方案是这样做：

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

我想要一个以页面为中心的 div，高度为页面高度的 100%，所以我的总体解决方案是：

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

您可能需要使父元素（或简称为“body”）具有position: relative;

于 2012-06-14T18:08:10.903 回答
13

您可以使用Faux Columns作弊， 或者您可以使用一些CSS 技巧

于 2009-04-03T06:06:23.113 回答
8

使用绝对位置。请注意，这不是我们通常习惯于使用绝对位置的方式，它需要手动布局或使用浮动对话框。当您调整窗口或内容的大小时，这将自动拉伸。我相信这需要标准模式，但可以在 IE6 及更高版本中使用。

只需将 id 为 '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 的内容拉长。导航栏使用绝对定位将自身伸展到其父级的高度。对于水平对齐，我们使内容 div 自身偏移导航栏的相同宽度。

使用 CSS3 flex box 模型，这变得更容易了，但这在 IE 中尚不可用，并且有一些它自己的怪癖。

于 2010-06-06T21:10:36.330 回答
7

使用表格很简单：

<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 成为了比喻性的锤子。

于 2009-04-03T08:40:27.907 回答
7

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

CSS：

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
于 2012-04-18T05:29:17.290 回答
5

我想在提示模态弹出窗口之前覆盖整个网页。我尝试了许多使用 CSS 和 Javascript 的方法，但在我找到以下解决方案之前，它们都没有帮助。它对我有用，我希望它对你也有帮助。

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

祝你好运 ;-）

于 2016-10-20T02:51:28.377 回答
5

如果您的目标是更现代的浏览器，生活可能会非常简单。尝试：

.elem{    
    height: 100vh;
 }

如果您在页面的 50% 处需要它，请将 100 替换为 50。

于 2017-02-06T23:50:59.720 回答
3 
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
于 2013-04-26T11:34:56.807 回答
1 

 
           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>

于 2014-10-06T08:31:40.007 回答
0

很简单，只需将其包装在一个表格 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>
于 2014-12-11T16:40:18.430 回答
-2

我成功了

min-height: 100vh

对于菜单和内容 div。

于 2021-04-05T10:09:12.110 回答