创建一个具有完整高度的元素（HTML / CSS）

Question

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

如果您访问过w3school网站，我确定您会注意到左侧的侧边栏导航器。我喜欢这样，并希望创造类似的东西。

虽然乍一看它非常简单，但它不是!!

通过一个漂亮的技巧，我做了类似的事情：

＆＃13;

＆＃13;

  * {
  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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是正如您所看到的，导航列表的滚动条仍然与其内容的大小相匹配，这就是此方法的问题。

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

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

（当然我不想使用 JavaScript 或其他任何内容。只需 CSS ）

所以，如果您有特殊方法或我可以使用的东西（类似 w3school ）请分享。

提前致谢。

Answer 1

这是两个结构，两个都是动态的并填充视口高度，第一次使用flex，

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

，第二次使用display: table

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;