Fatal编程技术网
  • css/
  • CSS Div拉伸100%页面高度

CSS Div拉伸100%页面高度

css

CSS Div拉伸100%页面高度,css,height,max,stretch,Css,Height,Max,Stretch,我在页面的左侧有一个导航栏，我希望它能延伸到页面高度的100%。不仅仅是视口的高度，还包括在滚动之前隐藏的区域。我不想使用javascript来实现这一点 它可以用HTML/CSS实现吗？你可以使用 或者您可以使用一些使用表格很简单： <html> <head> <title>100% Height test</title> </head> <body> <table style="float: l

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

它可以用HTML/CSS实现吗？

你可以使用
或者您可以使用一些

使用表格很简单：

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


100%高度试验
导航区
内容布拉布拉。。。文本

文本

文本

文本
当DIV被引入时，人们非常害怕桌子，以至于可怜的DIV成了隐喻的锤子。

使用绝对位置。请注意，这不是我们通常使用绝对位置的方式，它需要手动布局或使用浮动对话框。当您调整窗口或内容的大小时，这将自动拉伸。我相信这需要标准模式，但在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的内容拉伸。导航条使用绝对定位将自身拉伸到其父级的高度。对于水平对齐，我们使content div自身偏移与导航条相同的宽度r

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

我遇到了与您相同的问题。我想将
DIV
作为背景，为什么，因为它很容易通过javascript操纵DIV。无论如何，我在css中为该DIV做了三件事

CSS:

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

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

<style>

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

</style>
下面是我在使用div作为动态背景的容器时最终提出的解决方案

  • 删除非后台使用的
    z-index
  • 删除全高列的
    左侧
    或
    右侧
  • 删除全宽行的
    顶部
    或
    底部
编辑1:以下CSS已被编辑，因为它在FF和Chrome中没有正确显示。将
位置：相对
移动到HTML上，并将主体设置为
高度：100%
而不是
最小高度：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>



如果不这样做，云容器DIV将从HTML的布局上下文中删除。
position:relative
确保在绘制DIV时，DIV仍保留在HTML框中，以便
bottom:0
表示HTML框的底部。您还可以在云容器上使用
height:100%
，因为它现在表示t的高度HTML标记，而不是视口。
我有一个类似的问题，解决方案是这样做：


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


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


#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”）具有
位置：relative；


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




document.body.onload=函数（）{
var textcontrol=document.getElementById（“页面”）；
textcontrol.style.height=（window.innerHeight）+“px”；
}




使用HTML5，最简单的方法就是简单地执行
高度：100vh
。其中“vh”表示浏览器窗口的视口高度。响应浏览器和移动设备的大小调整。
简单，只需将其包装在表格分区中即可

HTML:


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



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



<style>

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

</style>




一些文本
我的导航还是什么


CSS:


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



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



<style>

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

</style>




.fake表格{显示：表格；宽度：100%；高度：100%；}
.左侧尺寸{宽度：30%；高度：100%；}
.左侧尺寸{宽度：70%；高度：100%；}

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




html，正文{
保证金：0px 0px；
身高100%；
}
整版{
位置：固定；
排名：0；
底部：0；
宽度：100%；
身高：100%；
背景色：#000；
不透明度：0.8；
溢出y：隐藏；
溢出x：隐藏；
}
div.full-page div.avoid-content-highlight{
位置：相对位置；
宽度：100%；
身高：100%；
}
div.modal-popup{
位置：固定；
最高：20%；
底部：20%；
左：30%；
右：30%；
背景色：#FFF；
边框：1px实心#000；
}
//为了我的实习测试而投票
var interval=setInterval（函数（）{
如果（document.readyState==='complete'）{
间隔时间；
isReady（）；
}    
}, 1000);
函数isReady（）{
document.getElementById（'btn1'）。disabled=false；
document.getElementById（'btn2'）。disabled=false；
//禁用滚动
document.getElementsByTagName（'body'）[0].style.overflow='hidden'；
}
函数promptModalPopup（）{
document.getElementById（“div1”）.style.visibility='visible'；
document.getElementById（“div2”）.style.visibility='visible'；
//禁用滚动
document.getElementsByTagName（'body'）[0]。样式