html - 包装宽度 :100%; works fine when browser is maximized but when not maximized it cuts off

Question

基本上我正在创建这个网站，我将包装器设置为 100% 宽度，当浏览器最大化时它工作正常，但如果没有最大化它并且你向右滚动，内容在结束时被切断内容容器并没有完全拉伸(stretch)？？在这里询问之前，我到处寻找解决方案，但找不到。

这是包装器 CSS。

#wrapper-main { background-image:url(images/structure/bg.png); background-color:#e8eef1; background-repeat:repeat-x; display:table; width:100%; margin:0; padding:0; }

如果您查看网站并且没有最大化它，您应该明白我的意思，我不确定如何解决这个问题？？？

http://eosa.co.cc/themes/osoa/index.html

Answer 1

问题是由您定义的 styles.css 中的第 214 行产生的:

.onethirdbox { width:296px; float:left; margin:0 40px 40px 0; position:relative }

如果将所有这些加起来，每个框的宽度为 296+40 = 336 像素。 3*336 = 1008px... 这比您的内容宽度 968px 还宽。但是即使你把 margin 减到 0，你还是得把 width 减到 250px 才能摆脱你不喜欢的效果....这当然会让三分之一的盒子看起来很滑稽....这么清楚还有其他事情正在发生......我不确定它现在是什么，但这是你应该开始的地方......换句话说，如果你将上面的行替换为:

.onethirdbox { width:250px; float:left; margin:40px 0; position:relative }

您写的问题消失了(出现了一个新问题)。

要暴力解决方案，而不是更改 onethirdbox，您可以只使 #footerwrapper 的溢出不可见:

#footerwrapper {
    overflow:hidden;
}

这治标不治本，但实际上并没有解决任何问题。