简体   繁体   English

流体100%的宽度显示出较大的水平滚动

[英]Fluid 100% width showing large horizontal scroll

I can't figure this out - but I'm sure someone out there can... I'm working on a new fluid width set to 100%, with min and max widths set for the content wrapper. 我无法弄清楚-但我敢肯定有人可以...我正在将新的流体宽度设置为100%,并为内容包装设置了最小和最大宽度。

The problem arises when the header area isn't set to overflow:hidden - a large horizontal scroll appears, even though the margin is set to auto and there should be no overflow. 当页眉区域未设置为溢出时会出现此问题:隐藏-即使页边距设置为自动并且应该没有溢出,也会出现较大的水平滚动。 Here's a link 这是一个链接

If any smart person could check it out with a fresh pair of eyes it would be a big help! 如果有一个聪明的人可以用新的眼睛检查一下,那将是一个很大的帮助! Eg using Chrome inspector you could see the code, or I could post the CSS (currently inline until I assign the divs ids and classes)... 例如,使用Chrome Inspector,您可以看到代码,也可以发布CSS(当前为内联,直到分配div ID和类为止)...

4 divs under your header you have 3 divs that are relatively positioned... They have margins of more than 600 px, widths of 100%, and are positioned several hundred pixels from the left side... Removing these fixed the scroll issue but also deleted some of the header, will post screenie... 标头下有4个div,您有3个相对放置的div。它们的边距大于600 px,宽度为100%,并且位于左侧几百个像素...移除这些固定了滚动问题,但是还删除了一些标题,将张贴筛选...

替代文字

Give them proper widths this time... 这次给他们适当的宽度...

The reason for this is because of the two div s containing the birds on the header. 这样做的原因是因为两个div在标头上包含小鸟。 The div s are block level elements, which means that they assume the width of their parents, and relatively positioned, so when they get moved, they push out of the containing div 's right and create the scrollbar. div是块级元素,这意味着它们假定其父级的宽度并相对定位,因此当它们移动时,它们会从包含div的右侧推出并创建滚动条。 Here's what you see if you add a background to the two div s 这是将两个div添加背景的结果

替代文字

The solution here is to simply assign both div sa width. 这里的解决方案是简单地分配两个div sa宽度。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM