頁腳位置底部問題

Question

我希望頁腳在頁面底部的絕對位置，即使內容小於窗口高度。 我已經嘗試了所有可能的教程以及所有可以想到但無法做到的事情。

我的HTML語法是：

<html>

<head></head>

<body>

<header>
     <div class="wrap"></div>
</header>

<div class="content wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>

<footer>
    <div class="inner"></div>
</footer>

</body>

</html>

該站點是全寬度的，我使用.wrap和.inner類的寬度：1000px和margin 0自動；

請問有人可以解決嗎？

Answer 1

這是一個小提琴，正在使用jQuery進行您所要求的操作： FIDDLE

基本上，您只是比較主體和窗口的高度，如果主體較長，則將頁腳設置為絕對值，如果較短，則將其設置為固定值：

$(function () {
    //change this to 'display:none'
    $('.right').css({'display':'static'});
    var footer = $('footer');
    var theDocument = $('body');
    var theWindow = $(window);
    if (theDocument.height() < theWindow.height()) {
        footer.css({
            'position': 'fixed'
        });
    } else {
        theWindow.height();
        footer.css({
            'position': 'absolute'
        });

    }
});

更新：

這是一個修復頁腳位於內容上方的版本，您只需要將頁腳向下移動高度即可

小提琴

//######  code inside $(function () {}) will run as soon as DOM loads
$(function () {
    //change this to 'display:static' to add more content
    $('.right').css({'display':'none'});
    //sets a custom event handler to window resize + zoom, which triggers the 
    //footer fix function
    $(window).resize(function(){
        adjust_footer();
    });
    //also call this function as soon as document finishes loading
    adjust_footer();
});
//#####


function adjust_footer(){
    var footer = $('footer');
    var theDocument = $('body');
    var theWindow = $(window);
    //the  +footer.height() checks if there is enough space for footer
    //to stick it as fixed without having it cover content
    if (theDocument.height() +footer.height() < theWindow.height()) {
        footer.css({
            'position': 'fixed',
            //important, or footer will remain misplaced
            'bottom':0
        });
    } else {
        theWindow.height();
        footer.css({
            'position': 'absolute',
            //push footer down and align it to the end of content
            //meaning if footer's height is 50px, it will be pushed 50px
            //from the bottom of the content
            //* remember, bottom attribute aligns the element by its bottom
            'bottom':- footer.height()
        });
    }
}

Answer 2

如果我正確理解了您的問題，您實際上希望將頁腳定位為固定元素，並將bottom設置為0px。 無論如何，這都將使其保留在頁面底部。

position:fixed;
bottom:0px;

Answer 3

您可以使用CSS中的“固定”屬性，並添加“底部：0px;” 所以它永遠永遠在底部;）

<header>
     <div class="wrap">Header stuff</div>
</header>

<div class="content wrap">
    <div class="left">Left Stuff</div>
    <div class="right">Right stuff</div>
</div>

<footer>
    <div class="inner">Footer stuff</div>
</footer>

和CSS：

header
{
    width:100%;
    height:50px;
    background:green;
}

.content
{
    width:100%;
    background:blue;
}

.content .left
{
    width:30%;
    float:left;
    background:blue;
}

.content .right
{
    width:70%;
    float:right;
    background:yellow;
}

.inner
{
    padding:10px;
}

footer
{
    position:fixed;
    bottom:0px;
    height:40px;
    width:100%;
    background:red;
}

結果在這里： http ： //jsfiddle.net/67zR6/1/

頁腳位置底部問題

問題描述

3 個解決方案

解決方案1
1 已采納 2014-05-05 19:33:35

解決方案2
0 2014-05-05 19:08:06

解決方案3
0 2014-05-05 19:09:26

頁腳位置底部問題

問題描述

3 個解決方案

解決方案1 1 已采納 2014-05-05 19:33:35

解決方案2 0 2014-05-05 19:08:06

解決方案3 0 2014-05-05 19:09:26

解決方案1
1 已采納 2014-05-05 19:33:35

解決方案2
0 2014-05-05 19:08:06

解決方案3
0 2014-05-05 19:09:26