Question

我想我尝试在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>

Answer 1

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

因此需要删除以下规则：

#content {
  height: auto !important;
}

请在此处查看：

＆＃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;

Answer 2

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

让div填充父div的完整高度

2 个答案: