粘性頁腳問題-CSS

Question

因此，我完全了解有關“粘頁腳”的問題數量，並且在此處和有關粘頁腳的網站上也引用了很多很多不同的問題。 我在此項目之外創建了一個新模板，該模板可以正常工作，並提供了一些示例性示例，說明了腳注腳如何運行，無論是在包裝器內還是在外面。

當前，頁腳似乎“發粘”，但是在我的其中一頁上，內容（圖像和文本）似乎與頁腳重疊，這是因為頁腳未正確推到底部。 它似乎位於屏幕正下方（意味着您必須稍微滾動才能看到頁腳）-但是在此頁面上，它位於該位置，不會被下推，然后內容重疊。

我已經嘗試了所有方法，在HTML，BODY，WRAPPER，contentDiv上刪除了100％的內容，但基本上，一件事起作用了，這又破壞了另一件事。 即時之后，ContentDiv = 100％（按下頁腳）。 因此，我應該能夠創建一個空白頁，將頁腳粘貼到底部，如果內容增加，則將其向下推...簡單吧？ 但是用這樣的方法撕掉我的頭發：/因此，任何幫助將不勝感激，因為我有一個很短的截止日期來解決這個問題。

小提琴演示

的CSS

    html
    { margin: 0px; padding: 0px; height:100%; }
    body 
    { margin: 0px; padding: 0px; height: 100%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
    /* { margin: 0px; padding: 0px; height: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; } */

    p { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
    h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px; }
    h2 { margin:0px; padding:0px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

    /* PAGE FORMATTING - START*/
    span:hover { /* text-decoration: underline; */ }
    a:link, a:visted { }
    ahover, a:active { }
    .link_nav_header{
        padding:0px;
        font-size:20px;
        font-weight:bold;
        color:#333333;
        cursor:pointer;
    }
    .but_default
    {
        padding: 2px; 
        border: 1px solid #009900;
        background-color: #33FF00;
        /* background-color: #dddbdb; */ /* TWO COLOURS? */
    }
    .but_events-buybutton
    {
        padding:3px; 
        min-width:90%;
        margin-bottom:5px;
        color:#ffffff;
        background-color:#378ec8; 
    }
    .but_all
    {
        min-width:90%;
        cursor: pointer;
        margin: 2px;
    }

    /* HEADER - START */
    .hdr_container
    {
       width:100%;
       height:110px;
       padding:0px;
       margin:0px;
       position:relative;
       background-color:#0099ff;
       color: #ffffff;
       overflow: hidden;
    }
    #hdr_profile-icon {
        margin-top: 1%;
        margin-right: 1%;
        float: right;
        background-color: inherit;

    }

    /* NEW NAVIGATION */
    #nav {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        background-color: #333333;
        position: absolute;
        bottom: 0%;
    }
    #nav ul {
        list-style: none;
        /* width: 800px;*/ /* REMOVE TO STRETCH NAV TO FULL WIDTH */
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    #nav li {
        float: left; 
        text-align: center;
    }
    #nav ul li{
        width: 11%; /* STRETCHES NAV TO FULL WIDTH */
    }
    #nav li a {
        padding: 8px 15px;
        display: block;
        text-decoration: none;
        font-weight: bold;
        color: white;
        text-transform:uppercase
    }
    #nav li:first-child a {
        background: red;
        width: 10px;
        font-weight: normal;
        }
    #nav li a:hover {
        /* color: #c00; */
        background-color: #0099ff; 
    }
    #nav a:hover a:focus {
        /* color: #c00; */
        background-color: red; 
    }

    /* MAIN CONTENT - START */
    #wrapper {
        clear: both;
        /* margin: 0 auto; */
        width: 100%;
        height:100%;
        min-height: 100%;
        /* margin-bottom: -75px; */
        z-index:10;
    }
    .contentDiv
    {
        clear: both;
        width:65%;
        min-width: 800px;
        height:90%;
        background-color:#ffffff;
        margin-left:auto;
        margin-right:auto;
        /* z-index: -9999; */
    }

    /* TABLE - START */
    .tbl_container-centered
    {
        width:100%; 
        height:100%;
        min-height:100%; 
        /* padding-bottom: 20px; */
        margin-left:auto;
        margin-right:auto;
        display:table;
        overflow:auto; 
        /* margin-bottom: 75px; */
        display: inline-table;
        vertical-align: middle;
    }
    .tbl_containerpaneltext-centered
    {
        width:95%; 
        min-height:35%; 
        margin-left:auto;
        margin-right:auto;
        background-color:red;
    }
    .tbl_head-genericthread
    {
        min-height:3%;
        max-height:3%;
        text-align:center; 
        color:#ffffff;
        background-color:#0099ff;
    }
    .tbl_events-head {
        width: 100%;
        height: 100%;
        min-height: 100%;
        border: 1px solid;
        text-align: left;
        border-collapse: collapse;
    }
    .tbl_grid-events
    {
        background-color: #ffffff; 
    }
    .tbl_pickseats-famtable
    {
        width:100%;
        background-color:#e1e1e1;
    }
    table#tbl_events{
        height:100%;
        min-height:100%;
        border-collapse: collapse;
        border-right: 1px solid #333333;
        border-left: 1px solid #333333;
    }
    .link_moreinfo{
        padding:0px;
        font-size:14px;
        font-weight:bold;
        color:#0099ff;
        cursor:pointer;
    }
    #event_row {
        height: 140px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }
    #basket2 {
        background: red;
    }

 /* FOOTER CSS - START */
    .footer_container
    {
        clear: both;
        width:100%;
        height:75px;
        bottom:0;
        background-color:#0099ff;
        /* position:absolute; */
    }
    .footer_container, .wrapper:after {
        /* .push must be the same height as footer */
        height: 75px;
    }
    .wrapper:after {
        content: "";
        display: block;
    }
    .footer_global-bottom {
        width: 100%;
        margin: auto;
        padding-top: 20px;
        text-align: center;
        color: white;
        background: #333333;
    }
    .footer_global-bottom a {
        color: white;
        text-decoration: none;
    }

    /* ERROR HANDELING */
    .error {
        background: #ef7474;
        border: 1px solid #f5aca6;
        text-align: center;
    }
    .success
    {
        background: #74e963;
        border: 1px solid #59e836;
        text-align: center;
    }
    .alerts_box {
        padding: 10px;
        width: 250px;
        position: absolute;
        visibility: hidden; 
        font-size: 10px;
        color:black;
    }
    .alerts {
        width: 275px;
        z-index: 2;
        padding-bottom: 40px;
    }

Answer 1

您是否考慮過使用這段代碼：

.footer_container {
   position: fixed;
   bottom: 0;
   z-index: 100;
 }

如果希望看到完整的內容，則可以向包裝中添加如下內容：

margin-bottom: (footer-height)px;

或者使用padding-bottom而不是margin-bottom。

Answer 2

在您的#wrapper規則集中，將height:100%更改為height:auto並刪除min-height:100% 。

jsFiddle

#wrapper {
    clear: both;
    width: 100%;
    height:auto;
    z-index:10;
}

我相信將高度設置為100％會將其設置為瀏覽器窗口的100％，而不是內容的100％。 我對此可能是錯的。

這會將頁腳放在內容的末尾。 在內容小於窗口高度的頁面上，可以包裝頁腳並為頁腳包裝器提供一個類似的類：

.minContentFooter {
    position: absolute;
    bottom: 0;
}

如果情況是內容是動態加載的，並且您不知道它是否會填滿瀏覽器窗口，那么您將需要一些javascript來同時使用這兩種方式-位於內容底部還是底部內容最少的窗口。

Answer 3

解決問題的方法不是CSS，而是Javascript。 問題是由於頁面從表中加載了動態內容，它不知道contentDiv的大小，所以只知道頁腳在哪里。

通過設置CSS％高度，並使用javascript來糾正不包含內容的頁面或包含動態加載內容的頁面，可以實現頁腳的粘性。 以下代碼說明了活動的javascript：

            var totalHeight = $('#header').height() + $(id).height();
            var contentDivHeight = $('#content').height();
            var wrap = $('#wrapper');
            if (totalHeight >= contentDivHeight) {
                wrap.removeClass('wrapper-height');
                wrap.addClass('wrapper-minHeight');
            } else {
                wrap.addClass('wrapper-height');
                wrap.removeClass('wrapper-minHeight');
            }

該代碼檢查頁眉和內容中包含的內容的高度，以及如果頁腳上方的內容切換到強制最小高度而不是高度的css類，以允許頁腳流到內容的末尾。

• 非常感謝大家的幫助。