

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

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

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


CC BY-SA 3.0
2015-08-13T11:02:55.643
14387
2015-08-13T13:20:25.817
7973
question
html css
jQueryを使わずにサイドバー固定


こういうことか？

[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]


CC BY-SA 3.0
2015-08-13T13:04:57.190
14393
2015-08-13T13:20:25.817
2015-08-13T13:20:25.817
14387
answer