div填充Chrome中的所有高度答案

【问题标题】：Div filling all of the height in Chromediv填充Chrome中的所有高度
【发布时间】：2019-02-25 19:38:49
【问题描述】：

我有一个网站可以在平板电脑、电脑和手机上运行，除了 Chrome。主 div 应填充屏幕高度，无论是否已满。它具有中性灰色背景色。在 Chrome 中，它仅填充视口的大小，当滚动或视口大小改变时，背景颜色不适应。我已经尝试了我能想到的所有方法，并在 Safari、Firefox 和 Edge 上进行了测试，没有任何问题，Chrome 有什么问题？

<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'/>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <link rel='stylesheet' href='owstyles.css'/>

    <title>
      Layout experiment
    </title>

    </head>

  <body>
    <div id="holder">
            <div id="header">

            <div class="head-item">my logo here</div>
            <div class="head-item">other head item</div>

      </div><!--close header-->

      <div id="main">
              <h1>My Heading 1</h1>
                <h2>my heading 2</h2>

              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>

              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>

              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>

                <h2>heading 2</h2>

              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>

        </div> <!--close main-->

          </div><!--close holder-->

            </body>

          </html>

这里是 CSS

*         {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          }

html      {
          height: 100%;
          }

body{
    background-color: #EAEDF0;
    height: 100%;
    background-size: 100%;
    background-image: url('graphic/background.jpg');
    background-attachment: fixed;
    background-size: cover;
    }

    h1  {
        margin-left: 1em;
        margin-bottom: 0.5em;
        }

    h2  {
        margin-left: 1em;
        }


    p       {
        margin: 0 1em 1em 1em;
        }

#holder  {
        display: -webkit-flex;
        display: flex;
      -webkit-flex-direction: column;
        flex-direction: column;
      -webkit-justify-content: flex-start;
        justify-content: flex-start;
        color: #ffffff;
        height:100%;
        max-width: 960px;
        margin: auto;
}

#header   {
          display: -webkit-flex;
          display: flex;
          -webkit-flex-direction: row;
          flex-direction: row;
        height: auto;
        padding-bottom: 2.5em;
        background-image: url(graphic/waves.jpg);
        -webkit-justify-content: space-between;
        justify-content: space-between;
        align-items: center;
        }


#main  {
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      color: #000000;
      -webkit-flex: 1;
      flex: 1;
      height: 100%;
      background-color: #EAEDF0;
      max-width: 960px;

}

#footer {
    display: -webkit-flex;
    display: flex;
    background-color: #00ff00;
    height:auto;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    max-width: 960px;
    position: fixed;
    bottom: 0em;
    color: #ffffff;
    background-image:url('graphic/waves.jpg');
        }

.head-item {
          display: flex;
          margin: 2vw;
          height: 2vw;
          }

它也在www.oceanwind.ch/test直播

【问题讨论】：

我不确定您需要什么，但请尝试删除html 标签的样式并将min-heght: 100vh 添加到body 标签。
这是因为您的 html 高度是 100% 尝试删除它会起作用
这样更好，但是“主”分区的背景色只填充内容而不是屏幕的其余部分，但现在在其他浏览器上它不会填充屏幕。
你能用这个贴小提琴或密码笔吗
按照您提供的链接，我没有看到您报告的问题，是的，它在 chrome 上

标签： html css google-chrome flexbox

【解决方案1】：

根据您当前的 CSS，您只需删除高度 （基本上高度可以影响您的代码）

您有 2（两个）选项删除选项 1 或选项 2

选项：1

Body
{
height: 100%;
}

**Option: 2**

html 
{
height: 100%;
}

【讨论】：

还是没有达到要求的效果。主 div 的背景只会覆盖初始视口。如果我必须滚动背景颜色不附带它。

【解决方案2】：

在这种情况下你不需要使用 flexbox。只需按如下方式更新 CSS：

* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }

  html {
    height: 100%;
  }

  body{
      background-color: #EAEDF0;
      height: 100%;
      background-size: 100%;
      background-image: url('graphic/background.jpg');
      background-attachment: fixed;
      background-size: cover;
  }

  h1  {
      margin-left: 1em;
      margin-bottom: 0.5em;
  }

  h2  {
      margin-left: 1em;
  }


  p     {
      margin: 0 1em 1em 1em;
  }

  #holder  {
      min-height: 100vh;
      background-color: #EAEDF0;
      max-width: 960px;
      margin: auto;
  }

  #header   {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      height: auto;
      padding-bottom: 2.5em;
      background-image: url(graphic/waves.jpg);
      -webkit-justify-content: space-between;
      justify-content: space-between;
      align-items: center;
  }


  #main  {
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      color: #000000;
      -webkit-flex: 1;
      flex: 1;
      height: 100%;
      background-color: #EAEDF0;
      max-width: 960px;

  }

  #footer {
      display: -webkit-flex;
      display: flex;
      background-color: #00ff00;
      height:auto;
      -webkit-justify-content: space-around;
      justify-content: space-around;
      -webkit-align-items: center;
      align-items: center;
      width: 100%;
      max-width: 960px;
      position: fixed;
      bottom: 0em;
      color: #ffffff;
      background-image:url('graphic/waves.jpg');
  }

 .head-item {
      display: flex;
      margin: 2vw;
      height: 2vw;
  }

你使用了很多不必要的 CSS。花点时间整理一下。

【讨论】：

谢谢，是的，那里的代码太多了。我的网站不仅仅是这一小块。我将不得不清理它。当浏览器不执行其他浏览器时，我会不断添加位。我会尝试主 div 不是弹性框。如果我需要它，我可以在里面放一个 flexbox 吗？我需要一些时间才能将您的建议落实到位，
嗯，这完全取决于你如何安排你的 div 结构。有些选项比其他选项更好。是的，我的解决方案对你有用吗？您现在还有问题吗？
没有。如果您在 chrome 上查看 www.oceanwind.ch/test，如果初始窗口很小，然后放大，则背景不会填满空间。我在不同的浏览器上有很多问题。我将不得不回到起点并尝试重新开始。
是的，我点击了您提供的链接。一切看起来都很好。是的，我正在从 chrome 浏览器查看。

【解决方案3】：

删除它

body {
    height: 100%; 
}

【讨论】：