让div填充父div的完整高度

时间:2015-08-10 21:51:21

标签: html css

我想我尝试在stackoverflow上发布的每个解决方案,除了正确的解决方案。 2小时没什么,然后给一个100%的高度div,非常令人沮丧。

也许我只是累了(德国的夜晚),有人在几秒钟内看到了正确的解决方案。

除了具有可重复背景图像的类“layout_content_middle”的div之外,一切看起来都很棒。 “id = content”div具有正确的100%高度,但内容div中的conainer div没有,这就是问题所在。

这是我目前的代码。 重要提示,这是一个bootstrap项目,所以我使用容器和网格类。

html,
body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent header and footer by its height */
  margin: -80px auto -165px;
  /* Pad bottom by header and footer height */
  padding: 80px 0 165px;
}
/* Set the fixed height of the header here */

#header {
  height: 80px;
}
/* Set the fixed height of the footer here */

#footer {
  height: 165px;
}
<div id="header">
  <div class="container" style="max-width: 983px">
    <div class="row">
      <div class="col-xs-12">

      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="layout_content_top"></div>
      </div>
    </div>
  </div>
</div>

<div id="content">
  <div class="container" style="max-width: 983px; background-color: red; height: 100%">
    <div class="row">
      <div class="col-xs-12">
        <div class="layout_content_middle">


          asdasd asd ad as das d as

          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />

        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div class="container" style="max-width: 983px">
    <div class="row">
      <div class="col-xs-12" style="padding-left: 16px">
        <div class="layout_footer"></div>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分:0)

您拥有height: auto的!重要规则集,该规则会覆盖您的height: 100%,使您的身高自动生成,这样您的内容只会根据内容的需要进行扩展。

因此需要删除以下规则:

#content {
  height: auto !important;
}

请在此处查看:

&#13;
&#13;
html,
body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: 100%;
  /* Negative indent header and footer by its height */
  margin: -80px auto -165px;
  /* Pad bottom by header and footer height */
  padding: 80px 0 165px;
}
/* Set the fixed height of the header here */

#header {
  height: 80px;
}
/* Set the fixed height of the footer here */

#footer {
  height: 165px;
}
&#13;
<div id="header">
  <div class="container" style="max-width: 983px">
    <div class="row">
      <div class="col-xs-12">

      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="layout_content_top"></div>
      </div>
    </div>
  </div>
</div>

<div id="content">
  <div class="container" style="max-width: 983px; background-color: red; height: 100%">
    <div class="row">
      <div class="col-xs-12">
        <div class="layout_content_middle">


          asdasd asd ad as das d as

          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />asd
          <br />

        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div class="container" style="max-width: 983px">
    <div class="row">
      <div class="col-xs-12" style="padding-left: 16px">
        <div class="layout_footer"></div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

如果您想填充宽度,可以在父级上使用<Identity Id="Microsoft.Windows.Phone.Emulator.8.1" Version="8.1.0.0" Language="en-us" Publisher="Microsoft"/> ,然后左右添加position: relative