Question

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

可以在HTML / CSS中完成吗？

Answer 1

这是我在使用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标记的高度而不是视口。

Answer 2

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

Answer 3

你可以使用Faux Columns作弊或者您可以使用一些CSS trickery

Answer 4

我遇到了类似的问题，解决方法就是这样做：

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

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

Answer 5

使用表格很简单：

<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成为隐喻锤子。

Answer 6

使用绝对位置。请注意，这不是我们通常习惯使用绝对位置的方式，这需要手动布局或具有浮动对话框。当您调整窗口或内容的大小时，这将自动拉伸。我认为这需要标准模式，但可以在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尚未提供，并且有一些自己的怪癖。

Answer 7

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

<强> CSS：

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}

Answer 8

如果您要定位更多现代浏览器，生活可以非常简单。尝试：

.elem{    
    height: 100vh;
 }

如果您需要50％的页面，请将50替换为50.

Answer 9

* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}

Answer 10

＆＃13;

 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }

＆＃13;

<html>
<head><title></title></head>
<body>

<div id="page" style="background:green;">
</div>
</body>
</html>

＆＃13;

Answer 11

简单，只需将其包装在表格中......

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>

Answer 12

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

＆＃13;

    private void ptbType1_MouseLeave(object sender, EventArgs e)
    {
        PictureBox ptb = sender as PictureBox;
        LinkLabel lkl = ptb.Controls[0] as LinkLabel;
        if (!lkl.Bounds.Contains(ptb.PointToClient(Cursor.Position)))
        {
           lkl.Visible = false;
        }
    }

＆＃13;

祝你好运; - ）

Answer 13

我成功了

min-height: 100vh

对于菜单和内容 div。

CSS Div拉伸100％页面高度

13 个答案: