jQueryを使わずにサイドバー固定


サイドバーにfixedを使い、height100%にすればスクロールしても固定できますが、ヘッダーが80pxあった場合、スクロールした時に上に80px分余白が飽きます。

サイドバーにtop0にし、ヘッダーをrelativeにしてzindexをサイドバーより低くすれば空白は飽きませんが上に80px分余白が空きます。paddingも同じです。

どうにかいい案はありませんか？




こういうことか？

[code]

    <html>
      <head>
        <title>Test</title>
        <style type="text/css"><!--
          body {
            padding: 0;
            margin: 0;
          }
          #header {
            width: 100%;
            height: 80px;
            position: fixed;
            color: white;
            background-color: black;
            z-index: 2;
          }
          #sidebar {
            width: 25%;
            height: 100%;
            padding-top: 80px; /* #header@height */
            position: fixed;
            background-color: darkgray;
            z-index: 1;
          }
          #contents {
            margin-left: 25%; /* #sidebar@width */
            width: 75%;
            padding-top: 80px; /* #header@height */
            height: auto;
            background-color: lightgray;
            z-index: 0;
          }
        --></style>
      </head>
      <body>
        <div id="header">ヘッダ</div>
        <div id="sidebar">サイドメニュー</div>
        <div id="contents">
          <p>Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
          Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
          Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
          Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
          Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample</p>
        </div>
      </body>
    </html>
[/code]

