頁腳和奇怪的間距和定位

所以我的頁腳行事真的很奇怪。它在工作之前，但現在有這種奇怪的間距，當你向上滾動時，它跟隨頁面並創建額外的空間。這個想法是有一個粘滯的頁腳，通過http://css-tricks.com/snippets/css/sticky-footer/將始終停留在頁面的底部。對於SCSS的代碼是在這裏：頁腳和奇怪的間距和定位

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
header { 
    padding: 1em; 
    background:#EFDECD; //#5ee; 
    text-align: center; 

} 

#content { 
    padding: 10px; 
    padding-bottom: 80px; /* Height of the footer element */ 
} 
footer { 
    display: block; 
    width:100%; 
    height:5em; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#EFDECD; //#EFDECD 
    text-align: center; 
    overflow: hidden; 
    a{ 
     padding: .75rem; 
     // position:relative; 
     top: 1.5em; 
     display: inline-block; 
     font-size: .72rem; 
    } 
    p{ 
     font-size: .72rem; 
    } 
} 

video{ 
    width: 100%; 
    height:auto; 
} 
//header{ 
////margin-top: 3ems; 
// background-color: lightgrey; 
//} 

//footer{ 
// height: 5em; 
// background-color: lightgrey; 
// position: relative; 
// bottom: 0px; 
// width: 100%; 
// 
//} 
.label{ 
margin-left: .5em; 
    margin-right: .5em; 
} 
table{ 
font-size: .75em; 
} 

.panel.callout a:not(.button):hover{ 
    color: $anchor-font-color-hover; 
} 
.headtext{ 
    display:inline-block; 
// font-size:3em; 
    margin: 0 5em; 
    text-align: center; 
// font-family:"Courier New"; 
    // font-weight: bold; 
// margin-left: 6em; 

} 
.img2{ 
    // max-height: 20%; 
    max-width: 25%; 
    float:right; 
    display:inline-block; 
    } 

.accorborder{ 
border: black dotted 1px; 
} 
h6{font-weight: bold;}

與實際鏈接站點位於www.new.omegadesignla.com 所以請隨時檢查出來，並從源頭檢驗。非常感謝您的寶貴時間。

來源

2015-02-17 codemonkey

嘗試這個片段更改：

footer { 
    display: block; 
    width:100%; 
    height:5em; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#EFDECD; //#EFDECD 
    text-align: center; 
    overflow: hidden; 
    a{ 
     padding: .75rem; 
     // position:relative; 
     top: 1.5em; 
     display: inline-block; 
     font-size: .72rem; 
    } 
    p{ 
     font-size: .72rem; 
    } 
}

這一個：

footer { 
    display: block; 
    width:100%; 
    height:5em; 
    position:fixed; 
    bottom:0; 
    left:0; 
    background:#EFDECD; //#EFDECD 
    text-align: center; 
    overflow: hidden; 
    a{ 
     padding: .75rem; 
     // position:relative; 
     top: 1.5em; 
     display: inline-block; 
     font-size: .72rem; 
    } 
    p{ 
     font-size: .72rem; 
    } 
}

注意到我只是改變了立場：絕對的;定位：固定;

來源

2015-02-17 21:27:16 Simon

謝謝這絕對有效。我嘗試改變從絕對和相反，但我完全忘記了固定，哈哈。謝謝！ – codemonkey 2015-02-17 21:35:22

謝謝如果我只想要常規頁腳而不是粘性頁面，我需要更改哪些內容？ – codemonkey 2015-02-17 21:44:15

你可以試試position：static;對於普通的一個。 – Simon 2015-02-17 21:46:00

您是否在添加任何樣式庫之後，在右鍵單擊並檢查元素後，樣式是否與您放下的樣式相匹配。如果它正在工作，它可能與css衝突。

我剛剛跳上你的頁面上，並看看它看起來像有一個百分比的屬性影響的佈局，如果是我，我會安排頁腳主體

詩不錯的手機後clearfix網站

來源

2015-02-17 21:33:44

感謝您如何添加明確的解決方案我將如何去做。 – codemonkey 2015-02-17 23:09:55

您好，抱歉，您需要讓孩子清楚父母元素的緩慢回覆，並且依賴於代碼，請參閱this.http：//css-tricks.com/snippets/css/clear-fix/ – 2015-02-25 15:12:01

頁腳和奇怪的間距和定位

回答

相關問題