1

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

此外，我无法获得第二个浮动 div 来填充 100% 未被旁边另一个 div 填充的空间。它只会填充 100% 的屏幕（在另一个较小的 div 下）或足以容纳文本。

我想应该注意的是，我尝试在 IE9 和 Firefox 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>
4

3 回答 3

0

设置position:relative为 body 将考虑 body 的高度并沿 body 完全拉伸绝对定位的内容
注意，以百分比指定的 height 属性是相对于包含块计算的

或者您也可以尝试overflow:hidden;使用 body 标签

于 2012-11-29T16:43:20.113 回答
0

我会尝试像往常一样将位置设置为绝对值，因为我有这种奇怪的行为，绝对值来救援，最重要的是，我还会将 left 和 top 设置为 0

于 2012-11-29T17:01:20.663 回答
0

基本上，按照 Ravindra 的建议，并对其进行了一些修改，我得到了这个工作。我使用以下样式设置设置身体

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="sidebar" 和 id="content"。我这样做是因为我在它自己的 div 中也有一个顶部栏，它位于“body”div 的上方 133px 高。

于 2012-12-08T03:40:17.820 回答