我有一個問題,我不能包裹我的頭,可能是因爲我累了。我正在使用Ryan's Fait sticky footer,我相信你們大多數人都很熟悉。我經常使用它,從來沒有任何問題,直到現在。我正在設計的設計有一個有幾個內部子元素的頁腳。粘性頁腳與內部元素填充和邊距(瑞安Fait)
其中一個元素.newsletter
正在使用填充或邊距來製作較大的間隙,以便可以將背景圖像放置在身體上。即使輸入正確的高度,這也會導致溢出。刪除填充可以糾正問題。我知道使用overflow: hidden
是一種選擇,但我寧願找出原因。沒有利潤或填充在新聞信件設置
屏:
帶空白或填充的消息信元中設置截圖不工作CSS:
body {
background: #212121;
color: #ddd;
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default;
height: 100%;
}
.maincontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -424px;
width: 100%;
}
.mainfooter, .push {
height: 424px;
width: 100%;
}
.newsletter {
padding: 1.875rem 0 1.875rem;
}
.newsletter-fix {
background: #000;
padding: 3rem 0 1rem;
color: #ddd;
}
工作CSS:
簡單地改變從上面提到的那些以下下面的值可以解決問題,但我想在通訊之間的填充物,或保證金缺口。
.maincontainer {
margin: 0 auto -394px;
}
.mainfooter, .push {
height: 394px;
}
.newsletter {
padding: 0;
}
這將是更好地幫助你的HTML代碼。無論如何,請嘗試'box-sizing:border-box;' –
你的意思是'box-sizing:border-box' does not fix the problem? –
是的,沒有運氣。我把'box-sizing:border-box;'放入'.mainfooter {}'中,也應該注意這個網站正在使用Zurb Foundation 5,所以它有一些盒子大小已經在之後和之前使用過。 –