CSS布局（以百分比表示）在Firefox中显示的右边距较小

Question

I am encountering a little challenge while scripting some css; 在编写一些CSS脚本时，我遇到了一些挑战； indeed, the right margin appears smaller than the left one, while both are set up at 5%! 确实，右边距看起来小于左边距，而两者都设置为5％！

Using Firefox 35.0.1 使用Firefox 35.0.1

 body { width: 100%; padding: 0; margin-top: 5%; background: #fff; } #main-content { float: left; width: 57%; background: #a7cbd3; margin-left: 5%; min-height: 777px; } #side { float: right; width: 33%; background: #0081a9; margin-right: 5%; min-height: 777px; }

 <div id="main-content">Main content</div> <div id="side">Side</div>

May I ask your advice(s)? 请问您的建议吗？

Thank you in advance! 先感谢您！

Answer 1

You have to reset default body margin to prevent content overflow. 您必须重置默认body边距，以防止内容溢出。

body {
  margin: 5% 0 0; /* added margin-top 5% as previous rule */
}

 body { width: 100%; padding: 0; margin: 5% 0 0; background: #fff; margin: 0; } #main-content { float: left; width: 57%; background: #a7cbd3; margin-left: 5%; min-height: 777px; } #side { float: right; width: 33%; background: #0081a9; margin-right: 5%; min-height: 777px; }

 <html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="main-content">Main content</div> <div id="side">Side</div> </body> </html>

CSS布局（以百分比表示）在Firefox中显示的右边距较小

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-02-18 17:26:47

CSS布局（以百分比表示）在Firefox中显示的右边距较小

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-02-18 17:26:47

解决方案1
1 已采纳 2015-02-18 17:26:47