1

ページの上部に、高さ 133 ピクセルのタイトル バーがあります。体を position: absolute と height: 100% に設定しました。

配置のために、下にさらに 2 つの div があります。それらを高さ 100% の相対位置に設定すると、ページの下部から 133 ピクセル余分に伸びています。トップバーを削除すると、高さは完璧ですが、トップバーは 100% から 100% + 133px を押し上げています。

<!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;
    }
    div#god {
      position: absolute;
      width: 100%;
      height: 100%;
    }  
    div#topbar {
      position: relative;
      top: 0px;
      left: 0px;
      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 {
      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#body { 
      position: relative;
      height: 100%;
    }
    div#sidebar {
      width: 300px;
      float: right;
      background-color: #EFEFEF;
      height: 100%;
    }
    div#content {
      height: 100%;
      overflow: hidden;
      background-color: #FEFEFE;
    }
    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="god">
  <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="body">
    <div id="sidebar">
      &nbsp;afasdfadsfadf
    </div>
    <div id="content">
      &nbsp;fdsafdasdfa
    </div>
  </div>
</div>
</body>
</html>
4

2 に答える 2

3

トップバーも絶対にします:

div#topbar {
    position: absolute;
    z-index: 1;
}

そして、margin-top を持つコンテンツとサイドバーのラッパー div を追加します。

<style>
    div.topbar-padding {
       margin-top: 133px;
    }
</style>    
<div id="body">
    <div id="sidebar">
        <div class="topbar-padding">
            &nbsp;afasdfadsfadf
        </div>
    </div>
    <div id="content">
      <div class="topbar-padding">
            &nbsp;afasdfadsfadf
        </div>
    </div>
  </div>
于 2012-11-29T18:28:21.940 に答える
1

トップバーも絶対でなければなりません。

div#topbar {
    position:absolute;
    z-index:2;
}
于 2012-11-29T18:06:18.723 に答える