頁腳過度膨脹

我的頁腳需要一些幫助，它的橫向過度伸展，我已將寬度設置爲100％，因此它理論上應該是頁面的大小。任何幫助將非常感激。頁腳過度膨脹

HTML

<footer> 
<p>Mandurah Jetty Maintenance | Copyright &copy 2017</p> 
</footer>

CSS

footer{ 
padding: 20px; 
color: #ffffff; 
background-color: #333; 
text-align: center; 
width: 100%; 
position: absolute; 
left: 0; 
bottom: 0; 
overflow: hidden; 


}

來源

2017-04-11 Bailee

你可以添加一個屏幕截圖你的意思是？如果它直接走向邊緣，你的意思是過度延伸？ – Xander

@EthanBristow是的，在這裏http://prntscr.com/ev2e1u，你看到頁腳擴展使得頁面水平變長:(你會發現任何修補程序都會被大大地渲染:) – Bailee

你可以嘗試工作中斷。這裏istruction https://www.w3schools.com/cssref/css3_pr_word-break.asp – MarcoSantino

如果你指的頁腳沒有到達頁面的最左/右，然後改變你的CSS來此：

footer { 
padding: 20px, 0px, 0px, 0px; //Top, right, bottom, left 
color: #ffffff; 
background-color: #333; 
text-align: center; 
width: 100%; 
position: absolute; 
left: 0; 
bottom: 0; 
overflow: hidden; 
}

來源

2017-04-11 10:16:44 Xander

這就是感謝的人！ – Bailee

@Bailee沒問題，我會很感激，如果你可以通過點擊這個答案左側的勾號按鈕來接受答案:) – Xander

是的，我不得不等待10分鐘才能做到這一點，抱歉等待，再次感謝 – Bailee

添加box-sizing:border-box; 當添加padding or border properties到element默認情況下它增加width和元素的height。所以通過加入box-sizing:border-box這會阻止increment在下面的div仍然保持指定填充和邊框的狀態。

箱子尺寸屬性用於更改用於計算元素寬度和高度的默認CSS箱子模型。

footer{ 
 
padding: 20px; 
 
color: #ffffff; 
 
background-color: #333; 
 
text-align: center; 
 
width: 100%; 
 
position: absolute; 
 
left: 0; 
 
bottom: 0; 
 
overflow: hidden; 
 
box-sizing:border-box; /*Add this*/ 
 
}

<footer> 
 
<p>Mandurah Jetty Maintenance | Copyright &copy 2017</p> 
 
</footer>

來源

2017-04-11 10:16:27 frnt

@Bailee希望這個幫助。 – frnt

謝謝你的回覆！ :) – Bailee

歡迎@Bailee :-) – frnt

頁腳過度膨脹

回答

相關問題