0

私は現在、次のように、ヘッダーと左側のサイドバーで構成される非常に単純なレイアウトの Web サイトを設計しています。

+--------------+
| Header       |
+---+----------+
| N | Page     |
| a | content  |
| v |          |
+---+----------+

同様のレイアウトを持つサイトは何百もあります。ただし、それらはすべて、サイドバーとヘッダーにそれぞれ固定の幅と高さを使用しているように見えます。これは私が強く嫌うものです。サイドバーが必要なだけのスペースを占めるべきではないのはなぜですか?

私の現在のアプローチでは、次のドキュメント構造を使用しています。

<body>
  <div id="container">
    <header>
      <!-- Header -->
    </header>
    <div id="page">
      <nav id="mainNav">
        <!-- Navigation sidebar -->
      </nav>
      <div id="content">
        <!-- Content -->
      </div>
    </div>
  </div>
</body>

でスタイリング 

html, body {
  height: 100%;
  margin: 0;
}

#container {
  display: table
  width: 100%;
}

#page {
  display: table-row;
}

header {
  caption-side: top;
  display: table-caption;
}

nav#mainNav {
  display: table-cell;
  white-space: nowrap;
  width: 0; /* to achieve minimum width */
}

#content {
  display: table-cell;
}

これは私が望むものに近いものです。は<header>、幅全体にまたがる必要があるため (また、意味があるため)、テーブル キャプションとしてスタイル設定されています。ここで、使用可能なすべての高さを占めるようにレイアウトしたいと思います。ただし、 (疑似テーブル) をheight: 100%オンに#containerすると、高さがキャプションを除外するため、全体がビューポートよりも高くなります。

高さと幅 (およびそれに応じてマージン) を手動で設定する必要なく、このかなり些細なタスクを達成する方法はありますか?

4

0 に答える 0