0

我目前正在设计一个布局非常简单的网站，由左侧的标题和侧边栏组成，如下所示：

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