html - CSS:将 div 调整为带导航栏的页面

Question

我一直在到处寻找这个问题的答案，但我还没有找到。

我有一个顶部有导航栏的页面。我希望其余内容完美地填满页面，但它却向下和向右重叠，导致出现滚动条。

我也不确定如何将侧 div 与主 div 分开。我目前正在使用 margin-left as W3C does , 但这感觉非常困惑，每当更改填充时都必须更改。

如果可能的话，我不希望任何元素有一个固定的位置。

html, body {
	margin: 0;
	padding: 0;
}

#topnav {
	background-color: #00FF00;
	border-bottom: 2px solid black;
	overflow: hidden;
}

#sidenav {
	background-color: #FFFF00;
	border-right: 1px solid black;
	display: inline-block;
	height: 100%;
	overflow: scroll;
	padding: 8px;
	position: absolute;
	width: 200px;
}

#main {
	background-color: #FF00FF;
	display: inline-block;
	height: 100%;
	margin-left: 217px;
	padding: 8px;
	position: absolute;
	width: 100%;
	word-break: break-word;
}

<div id="topnav">
	<span>Top Navigator</span>
</div>
<div id="sidenav">
	<span>Side Navigator</span>
</div>
<div id="main">
	<span>Main Area</span>
</div>

感谢您的帮助!

Answer 1

height: 100%代表您页面的高度，并且由于您有顶部栏，所以您的内容比页面大是正常的，然后会出现滚动条。

你应该使用 height: calc(100% - <height-of-your-top-bar>);反而。您还可以使用 vh单位。

---

你也可以使用 CSS Grid这非常适合这种情况。

body {
  display: grid;
  grid-template-rows: 80px calc(100vh - 80px);
  grid-template-columns: 200px auto;
}

#top {
  grid-column: 1 / span 2;
  
  background-color: green;
}

#side {
  background-color: red;
}

#main {
  background-color: blue;
}

<div id="top"></div>
<div id="side"></div>
<div id="main"></div>