Question

我一直在网上阅读并且遇到过许多博客和“专业人士”，他们说你不应该设置高度，你应该允许你的内容填充元素。首先......为什么？

如果我没有使用绝对或固定位置指定高度，我还能如何在我的标题上显示我的背景颜色：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>

CSS：

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的边缘顶部或许将元素向下推到正确的位置，这样可以正常工作，但这感觉很俗气。有没有更好的方法来做到这一点。

Answer 1

对响应式设计中的元素进行不必要的高度可以导致不同屏幕分辨率上的内容溢出，并且通常一个好主意是不指定高度并让您的内容决定高度元件。

话虽如此，总是存在需要手动指定元素高度的情况（通常这些情况是元素没有内在高度的情况，比如在没有其他内容的元素上指定背景图像，但其他情况确实存在）

例外证明了规则。在开发响应式网站时，最好不要指定高度......除非您必须 :)。

在响应式布局中指定高度

1 个答案: