使页脚正确粘贴到页面底部[重复]-Java 学习之路

181

这个问题在这里已有答案：

How do you get the footer to stay at the bottom of a Web page? 23个答案

我试图让我的页脚（只有一个带有一行文本的div）位于屏幕的底部，如果内容不是一直到底部，或者是在内容的底部，如果内容需要滚动条 . 如果内容不需要滚动条，则它可以很好地工作，但是当内容太长时，页脚仍然位于同一位置，位于内容的顶部 .

我的基本div结构是：

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

我相应的CSS（有点剥离）：

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    width: 674px;
    min-height: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#body {
    width: 616px;
    padding: 5px 14px 5px 14px;
    margin: 0 auto;
    padding-bottom: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;
}

10 回答

最简单的解决方案是在 <html> 标签上使用 min-height ，并使用 position:absolute; 定位 <footer>

Demo ：jsfiddle和SO片段：

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px;
    /* bottom = footer height */
    padding: 25px;
}

footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
}

<article>
    <!-- or <div class="container">, etc. -->
    <h1>James Dean CSS Sticky Footer</h1>
    <p>Blah blah blah blah</p>
    <p>More blah blah blah</p>
</article>
<footer>
    <h1>Footer Content</h1>
</footer>

回复于 2024-04-19T05:33:54+08:00

1

为什么不使用： { position: fixed; bottom: 0 } ？

回复于 2024-04-19T05:33:54+08:00

A simple solution that i use, works from IE8+

在html上给出min-height：100％，这样如果内容少了，那么页面底部会占据完整的视口高度和页脚 . 当内容增加时，页脚会随着内容向下移动并保持坚持到底 .

JS小提琴演奏演示：http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

<html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

回复于 2024-04-19T05:33:54+08:00

使用jQuery将内部代码放在 <head></head> 标签上

<script type="text/javascript">
$(document).ready(function() { 
    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;  
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
    }
});
</script>

回复于 2024-04-19T05:33:54+08:00

使用这个 . 它会解决它 .

#ibox_footer {
    padding-top: 3px; 
    position: absolute;
    height: 20px;
    margin-bottom: 0;
    bottom: 0;
    width: 100%;
}

回复于 2024-04-19T05:33:54+08:00

这应该对你有帮助 .

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
    height: 155px;
}

回复于 2024-04-19T05:33:54+08:00

17

假设您的页脚结束，最简单的方法是将 min-height 设置为400px的页面容器 . 您甚至不必为页脚添加CSS或只是 width:100% 假设您的页脚是您的直接孩子 <body>

回复于 2024-04-19T05:33:54+08:00
176
使用min-height作为某个像素值，而不是％ . 喜欢：min-height：620px;高度：自动;

和页脚：
```
.footer {
height:70px;
clear:both;
position:relative;
bottom:0;
width: 100%;
}
```
回复于 2024-04-19T05:33:54+08:00
4
这里分享的模型非常类似于Ryan Fait的StickyFooter http://ryanfait.com/sticky-footer

到目前为止，在这个讨论中只缺少一个div（Kenneth Palanganas在这里提出的模型在本地Win81设计中工作了大约48小时，然后在ie / chrome因未知原因崩溃） . Ryan的“推”div将满足一些不情愿的浏览器 . 注意，px是常见的，但是，对于液体布局一致性，em可能是优选的 .
```
* { border: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
.wrapper { height: auto !important; height: 100%; margin: 0 auto -1em; min-height: 100%; }
.footer, .push { height: 1em; }

<div class="wrapper"><p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer"><p>This is a footer</p>
</div>
```
回复于 2024-04-19T05:33:54+08:00

我想分享一下我如何使用在页面加载时调用的Javascript函数来解决我的问题 . 当页面内容的高度小于屏幕的高度时，该解决方案将页脚定位在屏幕的底部 .

function fix_layout(){
  //increase content div length by uncommenting below line
  //expandContent();
  
    var wraph = document.getElementById('wrapper').offsetHeight;
    if(wraph<window.innerHeight){ //if content is less than screenheight
        var headh   = document.getElementById('header').offsetHeight;
        var conth   = document.getElementById('content').offsetHeight;
        var footh   = document.getElementById('footer').offsetHeight;
        //var foottop = window.innerHeight - (headh + conth + footh);
        var foottop = window.innerHeight - (footh);
        $("#footer").css({top:foottop+'px'});
    }
}

function expandContent(){
  $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>'+

'<p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>'+

'<p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>'+

'<p>Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>'+

'<p>Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.</p>');
}

/*sample CSS*/
body{ background: black; margin: 0; }
#header{ background: grey; }
#content{background: yellow; }
#footer{ background: red; position: absolute; }

#header, #content, #footer{ display: inline-block; width: 100vw; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="fix_layout()">
        <div id="wrapper">
            <div id="header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                [some header elements here]
            </div>
            <div id="content" class="container">
              [some content elements here]
              
              
            </div>
            <div id="footer" class="footer">
                [some footer elements here]
            </div>
        </div>
    </body>

希望有所帮助 .

回复于 2024-04-19T05:33:54+08:00

使页脚正确粘贴到页面底部[重复]

10 回答

Css

Html

相关问题