我想用两种颜色显示一个网站的背景。绿色在顶部和灰色在底部。分离应该在~50%。我已经给了主标签的高度50vh和背景色:绿色。我已经给身体的背景色:灰色,到目前为止效果很好。
但是现在我想把flex-box放在页脚的底部。但是这会破坏我的background-color-50%-split,因为我必须拉伸(flex:1
)。我怎么还能做这样的背景色分割呢?它不应该是静态的。
- 无弹性盒拆分:**
:root {
--header-height: 42px;
--container-width: 900px;
--bg-dark-primary: #333;
--bg-dark-secondary: gray;
--text-color-primary: #333;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-family: sans-serif;
background-color: var(--bg-dark-secondary);
color: var(--text-color-primary);
min-height: 100vh;
}
header {
text-align: center;
width: 100%;
position: fixed;
top: 0;
overflow: hidden;
background: var(--bg-dark-primary);
}
footer {
max-height:200px;
min-height:50px;
background:black;
color: white;
}
.container {
max-width: var(--container-width);
width:100%;
margin: 0 auto;
}
.header {
display:inline-flex;
justify-content: space-between;
align-items: center;
height: var(--header-height);
}
.logo {
display: flex;
align-items: center;
}
.navbar {
display: flex;
align-items: stretch;
}
main {
margin-top: var(--header-height);
height: calc(55vh - var(--header-height));
color: white;
background: green;
}
<header>
<div class="container header">
<div class="logo">
<img class="logo__img" src="https://via.placeholder.com/40">
<span class="logo__brand">brand</span>
</div>
<nav class="navbar">
</nav>
</div><!-- container header -->
</header>
<main>
<div>x</div>
</main>
<footer>
footer
</footer>
- 使用flex-box定位页脚**
一个二个一个一个
2条答案
按热度按时间3pmvbmvn1#
你可以把绿色背景作为一种覆盖在深色背景上的东西。但是你必须使用绝对位置和z轴。我个人并不反对定位。但是我以前听说定位应该是最后的选择。我个人并不认为。没有这些CSS元素,我们在网页设计中会差很多;-)
qoefvg9y2#
更新全文
在我最初的回答中,我没有解决“scolling”背景要求,而是创建了一个“固定”背景的解决方案。
创建一个双色线性渐变并将其用作任何容器元素的
background-image
是非常简单的,因为您显然习惯于使用 *CSS自定义变量 *,所以我创建了一个只包含green
和#333
的垂直渐变变量:green 0% 50vh
填充视口的上半部分#333 50vh 100%
填充元素的剩余部分,无论它有多高。(注意混合使用
%
和vh
来创建效果)确保它使用正确的
background-size
填充相关容器元素的整个背景。对于此解决方案,cover
工作正常。我创建了一个四页的演示(每个
min-height: 100vh
)以下您的主 *Flexbox布局 * 页面结构,没有 * 自定义变量 * 和对齐。body { justify-content: space-between }
,它强制header
和footer
位于<body>
的顶部和底部,因为使用了main { flex: 1 }
。作为一个额外的例子,我引入了 * 自定义属性 *
[bg]
和[headfoot]
来尝试替代解决方案,这两个属性都在<body>
中使用:**[bg]**选项
background-attachement: scroll
(默认HTML)。background-attachement: fixed
与我之前的回答相同。**[头足]**选项
<header>
和<footer>
均滚出未“固定”到视口的视图(HTML默认position: static
)。<header>
固定在视口的顶部。<footer>
固定在视口底部<header>
和<footer>
都固定在视口的相应一侧最后,要删除“彩虹”和“反灰/绿色”背景,只需从相应的
<div class="...">
中删除bg rainbow
和bg last
。它们只是为了显示一些替代用途。代码带有注解,应该是不言自明的:
x一个一个一个一个x一个一个二个x