-1

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

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

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

1
  • 4
    どのようなレイアウトを作りたいのか、シンプルで良いので図示できませんか?
    – KoRoN
    2015年8月13日 11:14

1 件の回答 1

1

こういうことか?

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

3
  • 違います。 ヘッダーは固定しません。 メインコンテンツの後にサイドバーが無いとSEO的に悪いです 2015年8月13日 13:40
  • 2
    であればあなたが元にしてるコードか図を出してください。
    – user10678
    2015年8月13日 17:22
  • @user10678 過度に攻撃的なコメントだったので、コメントの文面を修正しました。
    – tomute
    2015年8月18日 11:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。