html 全屏百分比中的两个 div（不工作）

Question

我有我的代码，我希望两个 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>

这里

Answer 1

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

*{
  box-sizing:border-box}

它会起作用

Answer 2

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

.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；

Answer 3

前几天我遇到了类似的问题ago.Even虽然内容的分布是10:90的比例，但第二个div会下降。

Why is this happening?

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

How to fix it?

一个解决方案是保留边框并将第二个 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

Answer 4

您的问题是边框宽度。你给了一个元素 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 像素）。

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

Answer 5

这是因为它的计算方式如下：（10% + 边框大小 + 90%）。所以，它变得超过 100%。

要解决这个问题你可以使用calc。

喜欢：width: calc(10% - 6px);这里是边框大小。 3px 所以，(3px left + 3px right) 将从 10%(width) 减去。

更新代码。

.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>

html 全屏百分比中的两个 div（不工作）

Two divs in html fullscreen percentage (not working)

html

css

percentage