Question

我有以下代码

<body>
    <div style="height: 35%; background-color: black;"></div>
    <div id="header"> 
        <div> 
            <h1>Title</h1>
            <h3>Subtitle</h3> 
        </div> 
    </div>
    <div id="content" class="card">
        <div> 
            <p> 
                One 
            </p> 
            <p> 
                Two 
            </p> 
        </div>
    </div>
</body>

理想情况下，我希望页面的顶部是某种颜色（示例中为黑色），我希望标题区域（包含<h1>和<h3>元素）在黑匣子里面。然后我希望内容的第一段也包含在黑匣子里面。与此图片非常相似：

最好的方法是什么？

Answer 1

最简单的方法是在header

上使用绝对定位的伪元素

Stack snippet

＆＃13;

body {
  background-color: #ddd;
  margin: 0;
}

#header {
  position: relative;
  color: white;
  background-color: black;
}
#header::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  height: 60px;
  width: 100%;  
  background-color: inherit;
}

#header div {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
}

#content {
  position: relative;
  width: 80%;
  margin: 0 auto;
  background-color: white;
}

＆＃13;

<div id="header"> 
    <div> 
        <h1>Title</h1>
        <h3>Subtitle</h3> 
    </div>
</div>
<div id="content" class="card">
    <div> 
        <p> 
            One 
        </p> 
        <p> 
            Two 
        </p> 
        <p> 
            Thre 
        </p> 
        <p> 
            Fou
        </p> 
    </div>
</div>

＆＃13;

Answer 2

三个步骤：

将渐变背景应用于<body>。
创建两个切片元素：<header>和<section>
确保<header>和<section>顶部的所有相关元素都具有明确声明的高度（以像素为单位），这些高度与渐变的第一部分的高度相匹配。

Answer 3

确保html和body具有高度：100％或min-height：100％否则高度35％不会是视口高度的35％。

您可以使用绝对定位元素制作黑色背景。我建议调查css位置（相对，绝对，固定，静态）。

这是一个演示和代码：

https://jsfiddle.net/n617L6rh/

<div id="bg"></div>
<div id="header"> 
    <div> 
        <h1>Title</h1>
        <h3>Subtitle</h3> 
    </div> 
</div>
<div id="content" class="card">
    <div> 
        <p>One</p> 
        <p>Two</p> 
    </div>
</div>

html,
body {
    height: 100%;
}
#bg {
    height: 35%;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#header {
    height: 35%;
    color: #fff;
    position: relative;
}

CSS：扩展到某个元素的背景颜色

3 个答案: