无法获得div为100％高度

我已经在线尝试了几个建议，使得我的html和body标签具有100％的高度以及100％的最小高度。我已经将div标记设置为相同。它只是不扩展到屏幕的底部。无法获得div为100％高度

此外，我无法获得第二个浮动div来填充未被其他div旁边填充的空间的100％。它只会填充屏幕的100％（在其他较小的div下面）或足够允许文本。

我猜应该指出的是，我试图查看在IE9和火狐16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
    body { 
     margin: 0px; 
     padding: 0px; 
     height: 100%; 
     min-height: 100%; 
     overflow:hidden; 
    } 
    div#topbar { 
     width: 100%; 
     height:133px; 
     background-image :url(bkgnd_header_tile.jpg); 
    } 
    div#logo { 
     width: 187px; 
     height: 133px; 
     background-image:url('headerlogo_home.jpg'); 
     float: left; 
    } 
    div#text { 
     width: 1; 
     height: 133px; 
     float: right; 
    } 
    div#campuses { 
     height: 68px; 
     padding-top: 10px; 
     color: White; 
     text-align: right; 
    } 
    div#title { 
     height: 41px; 
     color: White; 
     text-align: right; 
     padding-top: 14px; 
    } 
    div#sidebar { 
     height: 100%; 
     width: 250px; 
     float: right; 
     background-color: Black; 
    } 
    div#body { 
     height: 100%; 
     width: 100% 
     float: right; 
     font-family: Segoe UI; 
    } 
    span.text { 
     padding-left: 15px; 
     padding-right: 15px; 
     font-family: Sans-Serif; 
     font-size: small; 
    } 
    span.name { 
     padding-left: 15px; 
     padding-right: 15px; 
     font-family: Sans-Serif; 
     font-size: x-large; 
    } 
    </style> 
</head> 
<body> 
    <div id="topbar"> 
    <div id="logo"></div> 
    <div id="text"> 
     <div id="campuses"> 
     <span class="text">St. John's Campus</span> 
     <span class="text">Grenfell Campus</span> 
     <span class="text">Marine Institute</span> 
     <span class="text">Harlow Campus</span> 
     <span class="text">Distance Education</span> 
     </div> 
     <div id="title"><span class="name">Memorial Self Service</span></div> 
    </div> 
    </div> 
    <div id="sidebar"> 

    </div> 
    <div id="body"> 
    asdf</div> 
</body> 
</html>

来源

2012-11-29 agent154

我们也需要HTML。 – sp00m

如果我们能够看到HTML，那么这将会更容易。 –

@ sp00m我添加了HTML。 – agent154

基本上，遵循拉文德拉的建议，并且修改一下，我得到了这个工作。我定身与下面的样式设置

body { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
}

，并利用这些对于我的两个DIV部分：

div#body { 
    position: relative; 
    height: 100%; 
    overflow:scroll; 
} 

div#sidebar { 
    position: fixed; 
    background-color : #EFEFEF; 
    height: 100%; 
    width: 300px; 
    overflow: hidden; 
} 

div#content { 
    height: 100%; 
    float: left; 
    margin-left: 300px;

<div id="body"></div>是其他两个div的父容器，ID =“侧边栏”和id = “内容”。我这样做是因为我在自己的“身体”div上方有一个133px高的顶栏。

来源

2012-12-08 03:40:17 agent154

设置position:relative身体将身体的高度考虑和舒展沿身体完全
注意绝对定位的内容以百分比指定高度属性与在包含块的尊重计算

，或者您也可以尝试在overflow:hidden; body标签

来源

2012-11-29 16:43:20

这也没有帮助。我发布了HTML，看看能否帮助你。 – agent154

我会尝试设置位置为绝对一如既往，我有这种奇怪的行为，绝对来救援，最重要的是，我也会设置左和顶0

来源

2012-11-29 17:01:20

解决了左边div的问题，但我无法让它在右边的div上工作 - 我有一个边栏也需要扩展到屏幕的底部。如果我将它设置为position：absolute，它会移动到窗口的左侧。 – agent154

试图定义右：0px到那个正确的div而不是左侧，绝对 –

无法获得div为100％高度

回答

相关问题