Html 在响应布局中指定高度

我一直在网上阅读，看到许多博客和“专业人士”说，你不应该设定高度，而应该让你的内容充满元素。首先为什么?

还有，如果我没有指定高度，而没有使用绝对位置或固定位置，我如何允许我的背景颜色显示在标题上：0

这是我的密码：

HTML:

<header>
    <div class="row-std">
        <div class="logo">
            <img src="images/logo.png">
        </div>

        <nav>
            <ul id="navbar">
                <a href="#"><li class="nav-item">LINK 1</li></a>
                <a href="#"><li class="nav-item">LINK 2</li></a>    
                <a href="#"><li class="nav-item">LINK 3</li></a>    
                <a href="#"><li class="nav-item">LINK 4</li></a>    
                <a href="#"><li class="nav-item">LINK 5</li></a>                
            </ul>
        </nav>
    </div>
</header>

header {
    width: 100%;
    background: #2f3842;
    position: absolute;
    top: 0;
}
header div.logo img {
    float: left;
    width: 20em;
    margin-top: 1.5em;
    margin-left: 1em;
}

header nav {
    float: right;
}
header nav ul#navbar a {
    text-decoration: none;
    list-style-type: none;
    color: #ebebeb;
    border: 0;
    transition-duration: .25s;
    -webkit-transition-duration: .25s;
}
header nav ul#navbar a:visited {
    color: #ebebeb;
}
header nav ul#navbar a:hover, header nav ul#navbar a:active {
    color: #16a085;
}
header nav ul#navbar .nav-item {
    display: inline-block;
    padding: 0.3125em 0.3125em;
    margin: 2.5em 1em;
    font-size: 0.84em;
    font-weight: 600;
}

---

如您所见，标头当前具有绝对位置，顶部属性值为“0”。这允许标题显示背景颜色，并允许元素根据其内容的高度填充，但如果我要在标题下方显示另一个元素，则我不能这样做，因为它将显示在标题下方，除非我使用5.5em的页边距顶部，可能会将元素向下推到正确的位置工作很好，但这感觉俗气。有更好的方法吗。

在响应设计中对元素设置不必要的高度可能会导致不同屏幕分辨率上的内容溢出，通常最好不要指定高度，让内容决定元素的高度

也就是说，在某些情况下，您总是需要手动指定元素的高度（通常这些情况下，元素没有固有高度，比如在没有其他内容的元素上指定背景图像，但也存在其他情况）

---

例外情况证明了这一规则。开发响应性网站时的底线，不要指定高度…除非你必须指定高度：）。

在响应性设计中，元素上有不必要的高度会导致不同屏幕分辨率上的内容溢出，通常最好不要指定高度，让内容决定元素的高度

也就是说，在某些情况下，您总是需要手动指定元素的高度（通常这些情况下，元素没有固有高度，比如在没有其他内容的元素上指定背景图像，但也存在其他情况）

---

例外情况证明了这一规则。底线在开发响应性网站时，不要指定高度……除非你必须指定高度。：）。

谢谢你的帮助。：）谢谢你的帮助。：）