Question

我昨天开始学习HTML并且遇到了一个（简单）示例：

这是我的HTML：

<!DOCTYPE html>

<html lang="en-GB">
<head>
    <title>stylish</title>
    <link rel="stylesheet" href="stylish_sheet.css" />
</head>
<body>

<header> Header </header>

<nav>
    <p>short</p>
    <p>longernav</p>
    <p>verylongnavigation</p>
</nav>

<section> 
    <div class="entry"> <h1> Section 1 </h1> 
    <p>  text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text </p>
    </div>

    <div class="entry"> <h1> Section 2 </h1> 
    <p>  text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text </p>
    </div>

    <div class="entry"> <h1> Section 3 </h1> 
    <p>  text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text </p>
    </div>

    <div class="entry"> <h1> Section 4 </h1> 
    <p>  text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text </p>
    </div>
</section>

<footer> Footer </footer>

</body>
</html>

和CSS代码：

.entry {
    float:left;
    margin:10px;
    padding:15px;
    width:auto;
    min-width:200px;
    max-width:250px;
    height:200px;
    border:1px solid black;
}

header, footer {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
    width:100vw;
    height:20px;
}

footer {
    clear:both;
}

nav {
    line-height:30px;
    background-color:lightgrey;
    height:100vh;
    width:10%;
    max-width:150px;
    float:left;
    padding:5px;
}

section {
    width:80%;
    min-width:250px;
    max-width:100%;
    float:right;
    padding:5px;
}

现在我有3个问题和一个小问题：

1）我希望导航的最小宽度适应其中最长的文本（在这种情况下＆＃34; verylongnavigation＆＃34;）。如果文本包装起来并不重要。我将最大宽度修正设置为150px所以我不知道当文本实际上比那时更长时会发生什么。在这种情况下，它的想法是它仍然适应文本，即文本大小的优先级高于最大宽度。

2）我希望导航的高度从标题到页脚。它是浅金色的，但它永远不会填满整个空间。看起来高度：100％只适应文本本身。我尝试了高度：100vh然后该区域变得比必要的高，即它变得比部分更大。

3）当我使浏览器窗口宽度变小时，然后是＆＃34;部分＆＃34;包裹在＆＃34; nav＆＃34;下面。如何禁用此s.t.我必须向右滚动才能看到章节中的文字吗？

4）次要问题：对于页眉和页脚，左侧有一个小的（~5px）空白区域，但右侧没有。我试图设置宽度：100％-5px，但似乎不可能。所以我发现了保证金权利：5px，但这没有做任何事情（而保证金顶部和保证金左边做我所寻求的）。有没有其他方法我可以合并绝对大小的相对大小或我使用它错误？

先谢谢你，

扬

Answer 1

只需从width删除max-width和nav。这样菜单背景将始终覆盖最长的文本。
要将导航背景的高度设置为与内容相同，您必须将两者都定义为相同的高度或使用虚拟列（有关此内容的更多信息，请参阅网络上的许多文档，他们是this one）。
使用仿制列（如上所述）section将不再包含在nav之下。基本上它们将是两个不同的列，它们会并排站在一起。
CSS中的元素具有默认样式。为了摆脱这些，人们通常通过将它们设置为0来“重置”这些值，如下所示：
```
* {
    padding:0;
    margin:0
}
```
以下是more info on resetting css。

使用CSS导航宽度和高度的基本问题

1 个答案: