Question

我是一个初学者，所以如果这是一个愚蠢的问题，请原谅我。我想将一个部分与标题分开，但是正在发生两种情况：

（1）当我将<section>放在</header>下方时，它们彼此重叠，如下所示： Section overlapping header（该部分是“同情是我们的指南针”）。

（2）但是，当我将<section>的{{1}} 放在html中时，它看起来很正常：Section inside of the header。

问题是我不希望该节位于标题内，因为毕竟它不是标题的一部分，而是在展示区域中，所以我希望它是另一回事。但我也希望它显示与将其放入标题相同的方式。

我已从代码中删除了一些内容（图标，徽标和菜单），以使代码少一些混乱，对你们更好。

（1）情况的代码（重叠）：

HTML

<header>

CSS

<body>
    <header>
        <div class="container">
            <div id="info">
                <!-- Icons and emails -->
            </div>

            <div id="branding">
                <!-- Logo -->
            </div>

             <nav>
                <ul>
                    <!-- Navbar Menu is here -->
                </ul>
            </nav>
        </div>
    </header>
    <section id="showcase">
        <div class="container">
            <h1>Compassion is our Compass</h1>
        </div>
    </section>
</body>

（2）情况的代码（看起来很正常，但是该部分位于标题内（不需要））：

HTML：

body{
    padding:0;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    line-height:1.6em;
}

.container{
    overflow:hidden;
    margin:auto;
    width:80%;
}

/*HEADER*/
header{
    background:#6fc4e2;
    max-height:30px;
    padding-right:10px;
}

 #branding{
    padding-top:20px;
    margin-top:30px;
    text-align:center;
    max-height:300px;
    padding-right:10px;
    border-bottom:#6fc4e2 solid 2px;
}

 header nav ul li{
    display:inline;
    text-align:center;
    padding:0 15px 0 15px;
}

CSS相同。

PS：导航中发生了同样的事情，但我决定将其保留在标题中，以免给我带来麻烦。

对不起，如果造成混淆，我希望你们能理解

如果有人要测试，则为完整代码：https://justpaste.it/5sr2a

Answer 1

您正在给<header>和max-height: 30px;做为背景，但是由于您的内容“高于” 30像素，因此<header>会溢出，但是选择会在之后那30px多数民众赞成在为什么它是重叠的。删除标头的max-height并将background-color仅添加到要添加标头的元素上。不是父元素。

Answer 2

为了清晰起见，我清理了您的代码。如果您在浏览器中运行此程序，我相信它可以为您提供所需的内容。在此示例中，CSS在HTML页面中。您通常会将其分离到CSS文件中。我希望这会有所帮助。

<!DOCTYPE html>
<html lang="en-us">

<head>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 15px;
            line-height: 1.6em;
        }

        #info {
            max-height: 30px;
            background: #6fc4e2;
        }

        #branding {
            padding-top: 20px;
            margin: 0 auto;
            margin-top: 30px;
            text-align: center;
            max-height: 300px;
            width: 80%;
            border-bottom: #6fc4e2 solid 2px;
        }

        #info,
        #showcase,
        nav {
            padding-left: 10%;
        }
    </style>

</head>

<body>
    <header>
        <div id="info">
            Icons and emails (info)
        </div>

        <div id="branding">
            Logo (branding)
        </div>

        <nav>
            <ul>
                Navbar Menu is here
            </ul>
        </nav>
    </header>
    <section id="showcase">
        <h1>Compassion is our Compass</h1>
    </section>
</body>

</html>

Answer 3

您可以使用CSS position属性。将header和section的位置都设置为absolute可以帮助实现您的目标-如果您将header和section分开放在{{1 }}（将HTML放在section元素内不是一个好习惯）。您的解决方案可能是这种方法：

header

并且，您需要删除header{ position: absolute; width: 100%; /* the rest of your style */ } section { position: absolute; bottom: 0; width: 100%; /* the rest of your style */ }元素内的padding-right属性，以避免水平滚动。

页眉和节彼此合并/重叠

3 个答案: