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

【问题标题】：CSS Page layout - divs move on resizeCSS 页面布局 - div 在调整大小时移动
【发布时间】：2015-02-28 13:15:52
【问题描述】：

我正在尝试找出使用 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% 宽的导航菜单，向左浮动。然后紧靠该导航右侧的是占据页面剩余宽度的主要内容区域。

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

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

【问题讨论】：

标签： html css

【解决方案1】：

问题是您在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>

【讨论】：

这行得通。不知道你可以在 CSS 中进行计算。谢谢

【解决方案2】：

首先，静态padding 导致问题。当您的浏览器变小时，您在内容上设置的padding 仍然是100px，因此它会将您的内容置于导航菜单下方。

我有两个想法：

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

【讨论】：

【解决方案3】：

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

用这个替换你的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;
}

【讨论】：