Question

容器只有屏幕高度的3/4左右，与子元素的高度不同。

为什么？

我尝试给容器和正文min-height: 100%，但这不起作用。即使使用!important

我不使用bootstrap，只是简单的html和css。

任何帮助非常感谢！

编辑：更改正文或html高度不起作用。这打破了页面。

我有一个带有以下CSS的正文：

body {
  background-image: url("../img/1.png");
  background-repeat: repeat;
  background-size: cover;
  font-family: "Raleway", sans-serif;
  font-size: 20px;
  font-weight: 300;

}

容器有这个CSS规则：

.container {
  width: 900px !important;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  height: 100% !important;
}

我的标记看起来像这样：

  <body>
    <div class="container">
      <div class="header">
        <div class="lang">
          <ul class="languages">
            <li>DE</li>
            <li>FR</li>
          </ul>
        </div>
        <img src="img/header/royalpool.png" alt="" class="logo-royal"/>
        <img src="img/header/bluetech.png" alt="" class="logo-bluetech"/>
        <div class="lang">
          <ul class="languages">
            <li>Kontakt</li>
            <li>Downloads</li>
            <li>Händler</li>
          </ul>
        </div>
        <ul class="navi">
          <li>
            <div class="box-q-1"><img src="img/header/i/pool.png" alt="" class=header-img/>
              <p>Pool</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/filter.png" alt="" class=header-img/>
              <p>Filteration</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/des.png" alt="" class=header-img/>
              <p>Desinfection</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/cover.png" alt="" class=header-img/>
              <p>Cover</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/solar.png" alt="" class=header-img/>
              <p>Solar</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/pumpe.png" alt="" class=header-img/>
              <p>Wärme-Pumpe</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/led.png" alt="" class=header-img/>
              <p>LED</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/clean.png" alt="" class=header-img/>
              <p>Clean</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/terasse.png" alt="" class=header-img/>
              <p>Terasse</p>
            </div>
          </li>
        </ul>
        <div style="clear:both"></div>
      </div>
      <div class="box-title">
        <p>Element-Betonbecken Premium</p>
      </div>
      <img src="img/page1/pool-top.png" class="pool-img" alt=""/>
      <div class="box-small-title-right">
        <p>Elementtreppen</p>
      </div>
      <div class="box-elementtreppen">
        <div class="treppe">
          <img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
          <p>Ecktreppe</p>
        </div>
        <div class="treppe">
          <img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
          <p>Innen Treppe</p>
        </div>
        <div class="treppe">
          <img src="img/page1/ganz.png" alt="Eck" class="treppen-img"/>
          <p>Ganze Treppe</p>
        </div>
        <div class="treppe">
          <img src="img/page1/rom.png" alt="Eck" class="treppen-img"/>
          <p>Römische Treppe</p>
        </div>
        <div class="treppe">
          <img src="img/page1/gerade.png" alt="Eck" class="treppen-img"/>
          <p>Gerade Treppe</p>
        </div>
      </div>
      <div class="box-small-title-left">
        <p>Varianten Wasserstand</p>
      </div>
      <img src="img/page1/normal.png" alt="" class="img-wasserstand first"/>
      <div class="box-small-title-right">
        <p>Bauphasen</p>
      </div>
      <div class="box-bauphasen"></div>

    </div>
  </body>

Answer 1

body包含浮动的元素，需要清除：

.container::before, .container::after {
    content: '';
    display: table;
}
.container::after {
    clear: both;
}

有关理解浮动的更多信息，请访问：https://css-tricks.com/all-about-floats/

Answer 2

你需要在身体和身体上增加100％的身高。 HTML使它工作。

html, body {
    height:100%;
}

您可以在this same question

上找到有关此内容的更多详情

Answer 3

如果您不必支持旧版浏览器（IE8或之前版本），您可以通过视口单元设置高度：

.container {
   height: 100vh;
}

检查此处的兼容性：http://caniuse.com/#search=vh

注意：如果您对此有任何疑虑，您还必须寻找background-size：cover规则的兼容性......

Answer 4

尝试

＆＃13;

html,body{
  height:100%;
  margin:0;
}

＆＃13;

Answer 5

你应该在html和body上重置边距和填充。

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

希望那样做。

Answer 6

尝试这可能有效：

 * {
      margin: 0;
      padding: 0;
    }
    html, 
    body {
      min-height: 100%;
    }
.container {
      height: 100%;
    }

容器与子元素

6 个答案: