容器与子元素高度不同答案

【问题标题】：Container is not the same height as the child elements容器与子元素高度不同
【发布时间】：2016-03-18 18:10:45
【问题描述】：

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

这是为什么呢？

我试图给容器和主体一个min-height: 100%，但这不起作用。即使!important

我不使用引导程序，只使用普通的 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>

【问题讨论】：

尝试为 html 和 body 设置高度 100% stackoverflow.com/a/8464208/145122
我的标题被这个破坏了，容器只是走得更远一点，但没有到底部。
how do I set height of container DIV to 100% of window height?的可能重复
向名为position 的.container 类添加一个新行，其值为relative
不，不起作用...如果有人发现它有用，这里是代码：patrickhofer.ch/blue

标签： html css

【解决方案1】：

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

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

更多了解浮动在这里：https://css-tricks.com/all-about-floats/

【讨论】：

这与问题有什么关系？
@Vi100 TBH 这个问题措辞不当。 OP 希望容器是子元素的高度，这不是由于 floated 元素造成的。

【解决方案2】：

您需要在正文和 HTML 上添加 100% 的高度才能使其正常工作。

html, body {
    height:100%;
}

你可以在this same question找到更多细节

【讨论】：

这应该可以工作，至少如果你没有绝对/固定定位。
嗯，我想我的 html 代码很乱。我不使用绝对/固定
哪里有现场演示？如果我们知道整个 CSS 代码，我们可能会为您提供帮助 :)

【解决方案3】：

试试

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

【讨论】：

【解决方案4】：

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

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

希望这样就可以了。

【讨论】：

【解决方案5】：

如果您不必支持旧浏览器（IE8 或之前的浏览器），您可以使用视口单位设置高度：

.container {
   height: 100vh;
}

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

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

【讨论】：

【解决方案6】：

试试这个可能有用：

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

【讨论】：