页脚过度膨胀

我的页脚需要一些帮助，它的横向过度伸展，我已将宽度设置为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

页脚过度膨胀

回答

相关问题