HTML，CSS粘页脚（不断增长的内容）

我试图在具有动态高度（不断增长的内容）的div底部粘住页脚。 div需要浮动在页面中间（距离左右相同的距离）。HTML，CSS粘页脚（不断增长的内容）

我有以下的HTML（剥离不相关的东西）：

<html> 
<body> 
    <div class="bodybackground"> 
    <div class="container"><!-- floats in the middle --> 
     <div class="mainContainer"><!-- different color etc --> 
     <!-- content with dynamic height --> 
     </div> 
     <footer class="pagefooter"></footer> 
    </div> 
    </div> 
</body> 
</html>

下面CSS（扒的不相干的东西）：

html { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
body { 
    margin: 0px; 
    height: 100%; 
} 
.bodybackground { 
    height: 100%; 
    min-height: 100%; 
} 

.container { 
    min-height: 100%; 
    display: inline-block; /* needed make it float in the middle of body */ 
    top: 0px; 
    position: relative; 
    padding: 0px; 
    padding-bottom: 158px; /* height of footer */ 
} 
.mainContainer { 
    position: absolute; 
    height: 100%; 
    overflow: auto; 
} 
.pagefooter { 
    position: absolute; 
    bottom: 0px; 
    margin: 0px; 
    padding: 0px; 
    height: 158px; 
}

然而mainContainer上的内容浮出并继续在页脚后面 - 而不是页脚处于最底部。除了那些强迫我改变容器显示属性的例子，我已经尝试过所有我能找到的东西，因为我需要将它保持在中间。

任何线索我在哪里白痴？谢谢！！

我需要使用.push更多一点，但是这解决了问题！感谢你及时的答复！

来源

2013-02-25 tonya_ytzerman

通过使用绝对值，页脚和mainContainer受制于您放置它们的位置。如果您使用绝对值并将页脚设置为底部，则只会粘贴到视口的底部。

对于粘性，您应该使用相对单位和所需的正确高度。

html, body { width:100%; height:100%; } 
#wrap { 
min-height:100%; 
height:auto !important; 
height:100%;  
margin: 0 auto -158px; /* Bottom value must = footer height */ 
} 

.pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; }

的顺序去

<div id="wrap"> 
<!--All of your content goes here--> 
<div class="push"></div> 
</div> 
<div class="pagefooter"></div>

这样，页脚总是有足够的空间，并设置为底部。保证金：自动包装内将中心包裹（只要它不是宽度：100％，它将居中没有内联）

来源

2013-02-26 03:16:52

所以，你正在寻找一个中心组件的粘脚。最简单的方法是在底部创建一个固定位置的元素，并在其中放置一个居中的div（基本上，一个具有指定宽度和边距的div：auto）。

您可以在http://jsfiddle.net/gHDd8/看到这样一个例子 - CSS基本上是

.outerBlockElement { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.innerBlockElement { 
    width: 50%; 
    margin: auto; 
}

凡HTML相当于

<div class="outerBlockElement"> 
    <p class="innerBlockElement">I am sticky footer text!</p> 
</div>

粘性页脚停留在视口的底部，为本在页面中。

来源

2013-02-25 20:58:33

HTML，CSS粘页脚（不断增长的内容）

回答

相关问题