html全屏百分比中的两个div（不起作用）答案

【问题标题】：Two divs in html fullscreen percentage (not working)html全屏百分比中的两个div（不起作用）
【发布时间】：2016-05-25 21:20:11
【问题描述】：

我有我的代码，我希望两个 div 组合在一起，但它不起作用。 .nav 标签为 10% 宽，内容为 90% 宽。所以他们应该适合在一起。感谢您的帮助。

这是我的 HTML 和 css：

.hf {
	text-align: center;
	background-color: blue;
	color: white;
	clear: both;
	padding: 5px;
}
.nav {
	width: 10%;
	padding: 5px;
	border-style: solid;
	background-color: orange;
	line-height: 200%;
	float: left;
	display: inline-block;
	margin: 0px;
	padding: 0px;
}
.content {
	width: 90%;
	float: left;
	background-color: yellow;
	padding: 0px;
	display: inline-block;
	margin: 0px;
}

<!DOCTYPE html>
<html>
<head>
	<title>Basic Layout</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
	<div class="hf">
		<h2>Heading</h2>
	</div>
	<div class="nav">
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
	</div>
	<div class="content">
		<h3>Content</h3>
		<p>The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
	</div>
</body>

这里

【问题讨论】：

标签： html css percentage

【解决方案1】：

您的问题是边框宽度。你给一个元素 10% 和 90%，然后为导航边框添加 2px，然后你就超过了 100%。实现此目的的更好方法是使用ul 作为菜单，这通常是有充分理由的。将背景和边框应用到 ul 并将您的导航容器保留为仅包含宽度的容器

这里有一个更好的代码解决方案：

HTML：

<div class="hf">
    <h2>Heading</h2>
</div>
<div class="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>
</div>
<div class="content">
    <h3>Content</h3>
    <p>The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over
        the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

还有 CSS：

body{
    padding:0;
    margin:0;
}

.hf {
    text-align: center;
    background-color: blue;
    color: white;
    clear: both;
    padding: 5px;
    width:100%;
}
.nav {
    width: 10%;
    float: left;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}
.nav ul{
    background-color: orange;
    border:2px solid #333;
    margin-top:0;
}
.nav ul li{
    list-style-type:none;
    padding:5px 0;
}
.content {
    width: 90%;
    float: left;
    background-color: yellow;
    padding: 0px;
    display: inline-block;
    margin: 0px;
}

在DEMO 中查看它的工作原理

您走在正确的轨道上，良好的响应式网页设计的关键是始终满足 100% 的规则。不要为了安装边框而减少容器的尺寸。你不会做对的。例如，将导航降低到 9% 会过度补偿您超过的 4 像素（导航两侧的边框宽度为 2 像素）。

正确的方法是通过创建容器来构建页面，然后将所需的元素放置在容器中并设置它们的样式。

【讨论】：

非常感谢。这很有意义。

【解决方案2】：

将此添加到您的 css 代码中：

*{
  box-sizing:border-box}

会有用的

【讨论】：

【解决方案3】：

只是因为.nav类的边框，边框也有一些宽度，你必须减小导航宽度，

.hf {
	text-align: center;
	background-color: blue;
	color: white;
	clear: both;
	padding: 5px;
}
.nav {
	width: 9%;
	padding: 5px;
	border-style: solid;
	background-color: orange;
	line-height: 200%;
	float: left;
	display: inline-block;
	margin: 0px;
	padding: 0px;
}
.content {
	width: 90%;
	float: left;
	background-color: yellow;
	padding: 0px;
	display: inline-block;
	margin: 0px;
}

<!DOCTYPE html>
<html>
<head>
	<title>Basic Layout</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
	<div class="hf">
		<h2>Heading</h2>
	</div>
	<div class="nav">
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
	</div>
	<div class="content">
		<h3>Content</h3>
		<p>The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
	</div>
</body>

ps：有两种方法，要么不给边框，要么只是根据边框减小宽度假设如果你的边框是 5px 你必须减小 nav 5px 的宽度；

【讨论】：

【解决方案4】：

前几天我也遇到过类似的问题。即使内容的分配比例是10:90，第二个div也会下降。

为什么会这样？

这是因为您为第一个 div 设置了边框。

如何解决？

一种解决方案是您允许保留边框并将第二个 div 减少到 89% 左右。

更新的 CSS

 .hf {
    text-align: center;
    background-color: blue;
    color: white;
    clear: both;
    padding: 5px;
}
.nav {
    width: 10%;

    border:1px solid black;
    background-color: orange;
    line-height: 200%;
    float: left;

    margin: 0px;
    padding: 0px;
}
.content {
    width: 89%;
    float: left;
    background-color: yellow;
    padding: 0px;

    margin: 0px;
}

这是一个有效的DEMO

【讨论】：

【解决方案5】：

这是因为它会像：(10% + 边框大小 + 90%)。所以，它变成了 100% 以上。

要解决它，您可以使用 calc。

like: width: calc(10% - 6px); 这里是边框大小。 3px 所以，（3px 左 + 3px 右）将减去 10%（宽度）。

更新代码。

.hf {
	text-align: center;
	background-color: blue;
	color: white;
	clear: both;
	padding: 5px;
}
.nav {
	width: 10%;
	padding: 5px;
	border-style: solid;
	background-color: orange;
	line-height: 200%;
	float: left;
	display: inline-block;
	margin: 0px;
	padding: 0px;
  width: calc(10% - 6px); // Here.
}
.content {
	width: 90%;
	float: left;
	background-color: yellow;
	padding: 0px;
	display: inline-block;
	margin: 0px;
}

<!DOCTYPE html>
<html>
<head>
	<title>Basic Layout</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
	<div class="hf">
		<h2>Heading</h2>
	</div>
	<div class="nav">
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
		<a href="#">Home</a><br>
	</div><!--
  --><div class="content">
		<h3>Content</h3>
		<p>The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
	</div>
</body>

【讨论】：