html - 制作一个全高的元素(HTML/CSS)

Question

我搜索了很多，找到了很多方法来做到这一点。但他们每个人都有一些我无法忽视的缺点。

如果您访问了 w3school网站，我相信您会注意到左侧的 sidebar 导航器。我喜欢它并想创造类似的东西。

乍一看很简单，其实不然!!

我用了一个漂亮的把戏做了这样的事情:

  * {
  box-sizing: border-box;
  }
  body {
      font-size: 35px;
      padding: 0;
      margin: 0;
      display: block;
  }
  .container {
      overflow: hidden;
      background: #eee;
  }
  .row {
      position: relative;
      background-color: #555;
      left: 25%;
  }
  .row::after {
      content: "";
      clear: both;
      display: block;
  }
  header, footer {
      text-align: left;
      padding: 30px;
      margin: 0;
  }

  header h1 {
      margin: 0;
      padding: 0;
  }
  nav {
      position: relative;
      /*position: fixed;*/
      overflow-y: scroll;
      top: 0;
      right: 25%;
      height: 100%;
      /*background-color: #eee;*/
  }
  ul {
      /*overflow: scroll;*/
  }
  section{
      position: relative;
      padding: 0 80px;
      right: 25%;
  }
  .col-3 {width: 25%;float: left;}
  .col-9 {width: 75%;float: left;}

<header><h1>HELL!<h1></header>
	<div class="container">
		<div class="row">
			<nav class="col-3">
				<ul>
					<li>first</li>
					<li>second</li>
					<li>third</li>
					
				</ul>
			</nav>
			<section class="col-9">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
			</p></section>
		</div>
	</div>
	<footer><h3>HELL!<h3></footer>

但是如您所见，导航列表的滚动条仍然匹配其内容的大小，这就是该方法的问题。

Faux Column 方法很酷，但我不喜欢在我的设计中使用图像。

正如我所说，我也看到了一些其他方法，但都有问题。

(当然我不想使用 JavaScript 或任何东西。只是 CSS)

因此，如果您有特殊方法或我可以使用的东西(例如w3school)，请分享。

提前致谢。

Answer 1

这里有 2 个结构，它们都是动态的并填充视口(viewport)高度，第一个使用 flex，

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  flex: 0;
  background: white;
  padding: 10px;
}
main {
  flex: 1;
  display: flex;
}
aside {
  flex: 0;
  padding: 10px;
  background: black;
  color: white;
}
section {
  flex: 1;
  padding: 10px;
  text-align: left;
  background: gray;
}
footer {
  flex: 0;
  padding: 10px;
  background: white;
}

<header>Header</header>
<main>
  <aside>Aside</aside>
  <section>Section</section>
</main>
<footer>Footer</footer>

第二次使用display: table

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
header div {
  height: 0;
  background: white;
  padding: 10px;
}
main {
  height: 100%;
}
aside {
  width: 0;
  padding: 10px;
  background: black;
  color: white;
}
section {
  width: 100%;
  padding: 10px;
  text-align: left;
  background: gray;
}
footer div {
  height: 0;
  padding: 10px;
  background: white;
}

<header class="row">
  <div class="cell">
    Header
  </div>
</header>
<main class="row">
  <aside class="cell">Aside</aside>
  <section class="cell">Section</section>
</main>
<footer class="row">
    <div class="cell">
  Footer
  </div>
</footer>