Question

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

+--------------+
| 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会使整个事物高于视口，因为高度会排除任何字幕。

有没有办法实现这个相当简单的任务而不必手动设置高度和宽度（以及相应的边距）？

没有固定尺寸的HTML标题/侧边栏布局

0 个答案: