Css Can'；I don’我不能让一个div达到100%的高度_Css_Html

Css Can'；I don’我不能让一个div达到100%的高度

css html

Css Can'；I don’我不能让一个div达到100%的高度,css,html,Css,Html,我在网上尝试了一些建议，使我的html和body标签的高度为100%，最小高度为100%。我也将我的div标签设置为相同的。。它只是没有扩展到屏幕的底部此外，我无法得到第二个浮动div来填充它旁边的另一个div没有填充的100%空间。它将只占屏幕的100%（在另一个较小的div下）或足够容纳文本我想应该注意的是，我试着在IE9和Firefox16中查看 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

我在网上尝试了一些建议，使我的html和body标签的高度为100%，最小高度为100%。我也将我的div标签设置为相同的。。它只是没有扩展到屏幕的底部

此外，我无法得到第二个浮动div来填充它旁边的另一个div没有填充的100%空间。它将只占屏幕的100%（在另一个较小的div下）或足够容纳文本

我想应该注意的是，我试着在IE9和Firefox16中查看

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


身体{
边际：0px；
填充：0px；
身高：100%；
最小高度：100%；
溢出：隐藏；
}  
顶杆{
宽度：100%；
高度：133px；
背景图片：url（bkgnd_header_tile.jpg）；
}
部门标志{
宽度：187px；
高度：133px；
背景图片：url（'headerlogo_home.jpg'）；
浮动：左；
}
div#text{
宽度：1；
高度：133px；
浮动：对；
}
分区校园{
高度：68px；
填充顶部：10px；
颜色：白色；
文本对齐：右对齐；
}
部门名称{
高度：41px；
颜色：白色；
文本对齐：右对齐；
填充顶部：14px；
}
div#侧边栏{
身高：100%；
宽度：250px；
浮动：对；
背景色：黑色；
}
部门#机构{
身高：100%；
宽度：100%
浮动：对；
字体系列：SegoeUI；
}
span.text{
左侧填充：15px；
右侧填充：15px；
字体系列：无衬线；
字体大小：小；
}
span.name{
左侧填充：15px；
右侧填充：15px；
字体系列：无衬线；
字号：x大号；
}  
圣约翰校区
格伦菲尔校区
海洋学院
哈洛校区
远程教育
纪念自助服务
asdf

设置

位置：相对于身体的将考虑身体的高度，并沿身体完全伸展绝对位置的内容

请注意，以百分比指定的高度特性是相对于包含块计算的

或者您也可以尝试溢出：隐藏在body tag中
我会像往常一样尝试将位置设置为绝对，我有这种奇怪的行为，绝对来拯救，最重要的是，我也会将left和top设置为0
基本上，按照Ravindra的建议，并稍微修改一下，我成功了。我使用以下样式设置设置主体
body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

并将其用于我的两个部门：
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=“sidebar”和id=“content”。我这样做是因为我在自己的div 133px中有一个顶部栏，刚好位于“body”div的上方。
如果我们可以看到HTML，那么帮助实现这一点会容易得多。@sp00m我添加了HTML。这也没有帮助。我发布了HTML来看看这是否对你有帮助。这解决了左边的div的问题，但是我不能让它对右边的div也起作用-我有一个侧边栏，它也需要扩展到屏幕的底部。如果我将其设置为position:absolute，它将移动到窗口的左侧。尝试将right:0px定义到该右div，而不是使用absolute