如何用背景颜色填充可见页面的其余部分？

Posted 2023-03-05

【中文标题】如何用背景颜色填充可见页面的其余部分？

【英文标题】：How do I fill the remainder of the visible page with a background color?

【发布时间】：2021-11-04 17:11:59

【问题描述】：

我有一个页面，我正在尝试填充一些内容，然后用背景颜色填充页面的其余部分。我已经能够使用min-height: 100vh 实现这一点，但问题是现在我的页面滚动得到了显着扩展。是否可以只为屏幕上的可见空间着色而不增加页面上的可滚动区域。

这是一个带有jsfiddle 的简单示例：

如果您从.footer 中删除min-height: 100vh，请注意彩色方块变得更小，现在滚动区域也不是很大。如何仅填充不使用最小高度样式时可见的区域。

.body 
  margin-left: 50px;


.footer 
  background-color: grey;
  min-height: 100vh;
  z-index: -100;
  margin-top: -150px;


img 
  z-index: 100;
    margin-left: 200px;



h1 
  text-align: center;

<div class="body">
  <div class="row justify-content-center text-centerr">
    <h1>
    This is my page heading
    </h1>
  </div>
  <div class="row justify-content-center text-center">
    <p>
    This is some information about this page. 
    </p>
  </div>
  <div class="row justify-content-center text-centerr">
    <div class="justify-content-center">
      <img src="https://cdn.vox-cdn.com/thumbor/RkBHz5tPuCNQOG0a6FooNwiqQyw=/0x0:939x704/1820x1213/filters:focal(0x0:939x704):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/49610677/homersimpson.0.0.jpg"
      
      
    </div>
  </div>
  <div class="footer">
    <br />
  </div>
</div>

【问题讨论】：

您提供的 html 和 CSS 不会复制您的 OP 中描绘的问题

可以在body元素上设置背景色，然后将.body的背景色设置为白色；

【参考方案1】：

这是我想出来的，使用flexbox和flex-grow: 1强制元素增长并占用剩余空间，flex-shrink: 0防止img和其他元素缩小。

我必须向页脚的父元素添加一个新类，以向其中添加flexbox 类。注意footer-parent 类。

<div class="body">
  <div class="row justify-content-center text-center">
    <h1>
      This is my page heading
    </h1>
  </div>
  <div class="row justify-content-center text-center">
    <p>
      This is some information about this page.
    </p>
  </div>
  <div class="row footer-parent justify-content-center text-center">
    <div class="justify-content-center">
      <img src="https://cdn.vox-cdn.com/thumbor/RkBHz5tPuCNQOG0a6FooNwiqQyw=/0x0:939x704/1820x1213/filters:focal(0x0:939x704):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/49610677/homersimpson.0.0.jpg"   />
    </div>
    <div class="footer">
      <br />
    </div>
  </div>
</div>

这是 CSS

body 
  margin: 0;


.body 
  display: flex;
  flex-flow: column nowrap;
  margin-left: 50px;
  height: 100%;
  min-height: 100vh;


.footer 
  background-color: grey;
  flex-grow: 1;
  z-index: -100;
  margin-top: -150px;


.footer-parent 
  display: flex;
  flex-grow: 1;
  flex-flow: column nowrap;


img 
  z-index: 100;
  flex-shrink: 0;
  margin-left: 200px;


h1 
  flex-shrink: 0;
  text-align: center;