CSS页面布局-div在调整大小时移动

我正试图找出用css布局这个页面的正确方法，但遇到了一些问题。html看起来像：

body {
	background-color: orange;
}
header {
	display: block;
	text-align: right;
	width: 100%;
	height: 50px;
}
.mainWrapper {
	width: 100%;
}
nav {
	border: 1px solid black;
	float: left;
	padding-top: 20px;
	width: 20%;
}
nav ul li {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	list-style-type: none;
	height: 75px;
	border: 1px solid black;
}
content {
	float: right;
	width: 65%;
	padding: 100px;
	background-color: white;
	border-radius: 10px;
	border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<header>Title</header>
<div class="mainWrapper">
	<nav>
		<ul>
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
			<li>Link 4</li>
		</ul>
	</nav>
	<content>blah blah blah</content>
</div>
</body>
</html>

我的目标是在顶部打出100%宽度的头球。左边是一个20%宽的导航菜单。然后在导航的右边是占据页面剩余宽度的主要内容区域。

问题是，当浏览器窗口变小时，主要内容区域会转移到导航菜单下方。它这样做很奇怪，因为我认为内容区域会调整大小，因为它被设置为%宽度。

此外，确保导航菜单和内容区域垂直占据浏览器其余空间的最佳方法是什么？我尝试在它们上设置一个高度：100%（在将主体高度设置为100%之后），但它只延伸过页面底部一点，并强制滚动条显示

问题出在content上的padding:100px。这将向元素的宽度添加一个固定的200px组件。如果您想保留填充，请将元素宽度更改为width: calc(65% - 200px);。不过这是一个很大的填充。您最好使用媒体查询来调整填充。

body {
	background-color: orange;
}
header {
	display: block;
	text-align: right;
	width: 100%;
	height: 50px;
}
.mainWrapper {
	width: 100%;
}
nav {
	border: 1px solid black;
	float: left;
	padding-top: 20px;
	width: 20%;
}
nav ul li {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	list-style-type: none;
	height: 75px;
	border: 1px solid black;
}
content {
	float: right;
	width: calc(65% - 200px);
	padding: 100px;
	background-color: white;
	border-radius: 10px;
	border: 1px solid black;
}

<body>
<header>Title</header>
<div class="mainWrapper">
	<nav>
		<ul>
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
			<li>Link 4</li>
		</ul>
	</nav>
	<content>blah blah blah</content>
</div>

首先，静态padding会导致问题。当你的浏览器变小时，你在内容上设置的padding仍然是100px，所以它会使你的内容位于导航菜单下面。

我有两个想法：

你可以为你的身体设置一个合适的padding和一个min-width
尝试媒体查询以根据宽度更改样式

我认为您需要的是让内容显示在屏幕右侧。如果是这种情况，您需要将position:absolute;添加到css中的content块中。

用这个替换你的css：

body {
    background-color: orange;
}
header {
    display: block;
    text-align: right;
    width: 100%;
    height: 50px;
}
.mainWrapper {
    width: 100%;
}
nav {
    border: 1px solid black;
    float: left;
    padding-top: 20px;
    width: 20%;
}
nav ul li {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    list-style-type: none;
    height: 75px;
    border: 1px solid black;
}
content {
    float: right;
    width: 65%;
    padding: 100px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid black;
    position: absolute;
}

相关内容

最新更新

热门标签：