时间戳

首页 > 解决方案 > CSS：将 div 大小调整为带有导航栏的页面

html - CSS：将 div 大小调整为带有导航栏的页面

问题描述

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

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

我也不确定如何将侧 div 与主 div 分开。我目前正在像 W3C 一样使用 margin-left ，但这感觉非常混乱，并且每当填充更改时都必须更改。

如果可能，我不希望任何元素具有固定位置。

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>

感谢您的任何帮助！

标签： htmlcssnavbar

解决方案

试试这个小提琴。希望这是您正在寻找的

尝试这个

*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}

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

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

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

推荐阅读