Html 用铬填充所有高度的Div_Html_Css_Google Chrome_Flexbox

Html 用铬填充所有高度的Div

html css google-chrome

Html 用铬填充所有高度的Div,html,css,google-chrome,flexbox,Html,Css,Google Chrome,Flexbox,我有一个网站，它可以在平板电脑、电脑和手机上运行，除了Chrome。主div应填充屏幕高度，无论其是否已满。它有一个中性灰色的背景色。在Chrome中，它仅填充视口的大小，当滚动或视口大小更改时，背景颜色不适应。我已经尝试了我能想到的一切，并在Safari、Firefox和Edge上进行了测试，没有任何问题，Chrome到底是怎么回事 <!doctype html> <html lang='en'> <head> <meta charset=

我有一个网站，它可以在平板电脑、电脑和手机上运行，除了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>

它也在现场

删除它

body {
    height: 100%; 
}

在这种情况下，不需要使用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。花点时间整理一下。

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

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

选项：1

Body
{
height: 100%;
}

**Option: 2**

html 
{
height: 100%;
}

我不确定您需要什么，但尝试删除

html

标记的样式，并将

minheight:100vh

添加到

body

标记中。这是因为您的html高度为100%，尝试删除它会更好，但“main”部分的背景色只填充内容，而不是屏幕的其余部分，但是现在在其他浏览器上，它不会填满屏幕。你能用它发布小提琴或代码笔吗？根据你提供的链接，我看不到你正在报告的问题，是的，它是在chromeThanks上的，是的，那里有太多的代码。除了这一小块，我的网站还有很多内容。我得把它清理干净。当一个浏览器做不到其他浏览器所做的事情时，我会不断地添加位。我将尝试使用主div而不是flex-box。如果我需要它，我可以在里面放一个flexbox吗？我需要一些时间来落实你的建议，这完全取决于你如何安排你的部门结构。有些选择比其他的好。是的，我的解决方案对你有用吗？你现在还有问题吗？没有。如果你在chrome上查看www.oceanwind.ch/test，如果初始窗口很小，然后它被放大，背景不会填满空间。我在不同的浏览器上对此有很多问题。我将不得不回到起点，尝试重新开始。是的，我遵循了你给出的链接。一切看起来都很好。是的，我在chrome浏览器上观看。它仍然没有达到要求的效果。主div的背景将仅覆盖初始视口。如果我必须滚动，背景颜色不会随附。

Body
{
height: 100%;
}

**Option: 2**

html 
{
height: 100%;
}