【问题标题】:Making main content sit above a sticky footer使主要内容位于粘性页脚上方
【发布时间】:2013-06-28 13:34:41
【问题描述】:

我设置了一个粘性页脚,并希望主要内容位于其上方。

目前内容在页脚后面,我想让div#fullContainer 位于页脚上方。使红色背景位于页脚上方。

我希望这是有道理的。

<div id="fullContainer" style="background-color:red">
    <div id="container">
        <div id="content" >Text here</div>
    </div>
</div>

<div class="footer" id="container">footer content</div>


.footer {

    border-top:3px solid #ff0000;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;

}    

【问题讨论】:

  • 有关您编写的代码问题的问题必须描述具体问题(在此处发布相关代码;不是链接)。有关指导,请参阅 SSCCE.org。

标签: html footer sticky


【解决方案1】:

应该这样做 - http://jsfiddle.net/Ballcheck/dp6LS/

刚刚添加了以下容器类-

#fullContainer {
    position: absolute;
    height: auto;
    width: 100%;
    top: 0px;
    left: 0px;
    bottom: 180px;
}

【讨论】:

  • 感谢Bungus的回复!现在差不多了,感谢您的帮助。然而,我仍然让文本显示在页脚下方并且背景颜色被剪裁:2welve.co.uk/mirrens/MIRRENS.jpg 我想让内容在 fullContainer 中滚动,就像 iframe 一样...但是 css :-)
  • 哈哈,不敢相信我没想到!干杯邦格斯!你这个家伙!非常感谢您的帮助!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-03
  • 1970-01-01
  • 2016-11-23
  • 2013-03-25
  • 2012-06-02
相关资源
最近更新 更多