当我调整浏览器大小时，为什么我的布局会被切断？

If you go to http://digitaldemo.net/anova/ and resize the browser to make it smaller and then scroll horizontally to the right, you will see that the background now covers the part of the page outside the wdith of the visible screen.

如果您访问http://digitaldemo.net/anova/并调整浏览器的大小以使其缩小，然后向右水平滚动，您将看到背景现在覆盖了可见屏幕的wdith之外的页面部分。

Why is this happening?

为什么会这样？

Any help would be most appreciated!

非常感激任何的帮助！

Best,

最好，

Cynthia

辛西娅

3 个解决方案

#1

Add this.

加上这个。

#navbar{ min-width: 1100px; }

same to .footer, .wrapper, and .footerbottom min-width:1100px

相同于.footer，.wrapper和.footerbottom min-width：1100px

#2

The problem is because the #nav element has a hard width of 1100px and a width:100% background on another element is only 100% of the width of the viewable area.

问题是因为#nav元素的宽度为1100px，宽度为：另一个元素的100％背景仅为可视区域宽度的100％。

Changing the min-width on the <body> to

将上的最小宽度更改为

body {
     min-width: 1100px;
}

will set your minimum page width to be the length of your longest element and therefore the CSS background will extend as it will be 100% of 1100px wide.

将您的最小页面宽度设置为最长元素的长度，因此CSS背景将延伸，因为它将是1100px宽度的100％。

For future projects I'd recommend reading responsive web design - one aspect being to design a site will adapt to the available width/height of a device, through a combination of non-fixed dimensions on elements and/or CSS Media queries.

对于未来的项目，我建议阅读响应式网页设计 - 设计网站的一个方面是通过元素和/或CSS媒体查询的非固定维度的组合来适应设备的可用宽度/高度。

#3

I just debugged your code and found out the issue. The issue is you are using overflow:hidden property. It is causing problem. like in class (.masthead) you apply this. Just remove it. then it is visible.

我只是调试了你的代码并发现了问题。问题是你正在使用overflow：hidden属性。这引起了问题。就像在类（.masthead）中一样，你应用它。只需删除它。然后它是可见的。

#1