css 当页脚使用弹性框定位时，背景色垂直50%拆分不起作用

wsewodh2 于 2023-01-22 发布在其他

关注(0)|答案(2)|浏览(139)

我想用两种颜色显示一个网站的背景。绿色在顶部和灰色在底部。分离应该在~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定位页脚**

一个二个一个一个

css

来源：https://stackoverflow.com/questions/75153111/background-color-vertical-50-split-does-not-work-when-the-footer-is-positioned

2条答案

按热度按时间

3pmvbmvn1#

你可以把绿色背景作为一种覆盖在深色背景上的东西。但是你必须使用绝对位置和z轴。我个人并不反对定位。但是我以前听说定位应该是最后的选择。我个人并不认为。没有这些CSS元素，我们在网页设计中会差很多;-）

- 下面是一个如何实施的示例：**

body {
  background: gray;
  display: flex;
  flex-direction:column;
  height: 100vh;
}

header, footer {
  background: black;
  min-height: 80px;
  color: white;
  font-size: large;
  text-align: center;
  padding-top:30px;
}

main {
  position: relative;
  background: yellow;
  flex: 1;
  z-index: -3;
}

article {
  margin: 0 auto;
  background: white;
  width: 600px;
  height: 200vh;
}

.blender {
  z-index: -2;
  position: absolute;
  top:0;
  width: 100%;
  height: 50vh;
  background: green;
}

<body>
  <header>
    HEADER
  </header>
  <main>
    <div class="blender"></div>
    <article>
      MAIN
    </article>    
  </main>

  <footer>
    FOOTER
  </footer>
</body>

赞(0）回复(0）举报 2023-01-22

qoefvg9y2#

更新全文

在我最初的回答中，我没有解决“scolling”背景要求，而是创建了一个“固定”背景的解决方案。
创建一个双色线性渐变并将其用作任何容器元素的background-image是非常简单的，因为您显然习惯于使用 *CSS自定义变量 *，所以我创建了一个只包含green和#333的垂直渐变变量：

--gradient: linear-gradient(to bottom,green 0% 50vh,#333 50vh 100%)

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]**选项

OP要求的“滚动”，background-attachement: scroll（默认HTML）。
“固定”，background-attachement: fixed与我之前的回答相同。
**[头足]**选项
“滚动”，<header>和<footer>均滚出未“固定”到视口的视图（HTML默认position: static）。
“head”，<header>固定在视口的顶部。
“英尺”，<footer>固定在视口底部
'fixed'，<header>和<footer>都固定在视口的相应一侧

最后，要删除“彩虹”和“反灰/绿色”背景，只需从相应的<div class="...">中删除bg rainbow和bg last。它们只是为了显示一些替代用途。
代码带有注解，应该是不言自明的：
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-22

我来回答

css 当页脚使用弹性框定位时，背景色垂直50%拆分不起作用

2条答案

相关问题

热门标签

最新问答