DIV 100%高度与页脚和标题,动态

时间:2016-12-17 21:51:41

标签: html css height

我现在已经搜索了几个小时,以便很好地解决100%高度div问题。我现在尝试了不同的代码,但是其中一些代码并没有真正帮助(在我的情况下)因为我需要一个响应式和IE8 +支持解决方案。所以一些有用的标签,比如' calc()'功能或' flexbox'无效。

我创建了一个sample page来向您展示问题所在。页脚应位于窗口当前大小的底部。两个内容div应该具有当前内容屏幕的完整高度,并且不存在任何滚动条,只要内容越过当前屏幕即可。如果内容增长超过当前屏幕高度,则页脚不应该被修复并且应该向下移动#34;

我的页面是响应式的,并使用Bootstrap 3构建。因此还有更多的行和列,但基本构建如下所示。

当前页面的构建如下:

<div id="page">
  <div id="header">
    My menu 
  </div>
  <div id="content">
    <div class="" id="content_left">
      Some content here ...
    </div>
    <div id="content_right">
      Some content there ...
    </div>
  </div>
  <div id="footer">
    My footer
  </div>
</div>

CSS:

html, body 
{
  display: block;
  min-height:100%; 
  height: 100%;
  padding:0; 
  margin:0;
}

#page
{
  margin: auto;
  max-width:500px;
  min-height: 100%;
  height: 100%;
  background: #333;
}

#header
{
  padding: 20px;
  background: #FF0;
}

#footer
{
  padding: 20px;
  background: #F0F;
  clear: both;
}

#content_left
{
  background: #0F0;
  float: left;
  width: 25%;
}

#content_right
{
  background: #0FF;
  width: 65%;
  float: left;
}

#content_left, #content_right
{
  padding: 10px;
}

很抱歉这很多条件,但这是我必须要处理的环境。 ( - ;

祝你好运, 打滑。

2 个答案:

答案 0 :(得分:0)

您可以考虑将其作为以下内容进行操作

检查此代码段

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
#page {
  margin: auto;
  width: 500px;
  position: relative;
  height: 100%;
  background: #333;
}
#wrapper {
  height: 100%;
  background: #A00;
}
#header {
  padding: 20px;
  background: #FF0;
}
#content_left {
  display: table-cell;
  background: #0F0;
  width: 25%;
}
#content_right {
  display: table-cell;
  background: #0FF;
  width: 75%;
}
#content_left,
#content_right {
  padding: 10px;
}
#footer {
  background: orange;
  display: table-cell;
  width: 500px;
}
<div id="page">
  <div id="wrapper">
    <div id="header">
      My menu
    </div>
    <div id="content">
      <div class="" id="content_left">
        Some content here ...
      </div>
      <div id="content_right">
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there.
        <br />Some content there.

        <br />Some content there ...
        <br />Some content there.
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />
      </div>
    </div>
    <div id="footer">
      My footer
    </div>
  </div>

</div>

希望这有帮助

答案 1 :(得分:0)

谢谢你的建议,但我已经解决了这个问题。 我已经创建了一个包含Bootstrap 3框架的新CodepenIO。

对于解决方案本身,我已将页脚从包装中排除。表示主容器的内容是包装器DIV(包括所有内容)和页脚DIV(包括页脚)。对于包装器的底部元素,我添加了padding-bottom属性,并为页脚本身添加了一个减去margin-top属性,该属性等于页脚的高度。因此,如果内容不会导致分页,则页脚会向上移动,如果内容很多,则页脚会向下移动。您可以找到解决方案HERE

HTML 如下所示:

<div class="container">
  <div class="" id="wrapper">
    <div class="row" id="header">
      <div class="">My menu</div>
    </div>
    <div class="row" id="content">
      <div class="col-lg-4 col-sm-4" id="content_left">
        Some content here ...
      </div>
      <div class="col-lg-8 col-sm-8" id="content_right">
        Some content there...
      </div>
    </div>
  <div style="clear:both;"></div>
  </div>
  <div class="row" id="footer">
    <div>My footer</div>
  </div>
</div>

CSS

html,body
{
  width:100%;
  height:100%;
}

.container 
{
  display: table;
  height: 100%;
  min-height:100%;
  max-width: 500px;
  background: #333;
}

#wrapper
{
  height: 100%;
  min-height: 100%;
  background: #A00;
}

.content
{
  background: #A00;
}

#header 
{
  padding: 20px;
  background: #FF0;
}

#footer 
{
  clear: both;
  background: #F0F;
  min-height: 20px;
  margin-top: -20px;
}

#content_left 
{
  background: #0F0;
}

#content_right 
{
  background: #0FF;
}

#content_left,
#content_right 
{
  padding-bottom: 20px;
}

非常感谢你的帮助! ( - :