Question

我创建了以下jsfiddle重新创建我的问题，我想要.dashboard＆amp; .inner-dashboard始终保持100％的高度，并始终将页脚保持在底部。

HTML

<div id="wrap">
    <body>
        <div class="dashboard">
            <div class="inner-dashboard">

            </div>
        </div>
    </body>
</div>
<div id="footer"></div>

CSS

html,body{
  height:100%;
}
#wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -60px;
  padding: 0 0 60px;
}
#footer {
  height: 60px;
  background-color: blue;
}
.dashboard{
  width: 100%;
  height: auto;
  min-height: 100%;
  position: absolute;
  padding-bottom: -60px;
  background-color:green;
}
.inner-dashboard{
  height:100%;
  padding-bottom: -60px;
  background-color:red;
}

Answer 1

我添加了修改后的css并添加了position属性

我希望修订版能解决您的问题：[更新] http://jsfiddle.net/saurabhsharma/rv7xN/3/

Answer 2

以下是一个例子：jsFiddle

我必须修改html才能拥有仪表板和页脚的公共容器。

<div id="wrap">

        <div class="dashboard">
            <div class="inner-dashboard">

            </div>
        </div>
    <div id="footer"></div> 
</div>

我在表格中转换wrapper（公共容器），在表格单元格中转换其他元素。因此，即使您的仪表板高度为200％，页脚仍然位于底部。

html,body{
  height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}

.dashboard{
  width: 95%;
  height: 200%;
  display:table;
  border:5px solid green;
}
.inner-dashboard{
 width: 95%;
  height: 100%;
  display:table-cell;
   border:5px solid red;
 }
#footer {    
    display:table;
    height: 60px;
    width:95%;
    border:5px solid blue;
    bottom:-10px;
}

是吗？！

在div内部划分（100％高度）并将页脚保持在底部 - JSFiddle

2 个答案: