HTML / CSS屏幕溢出问题

Question

我的HTML / CSS代码存在问题，这些问题让我陷入困境。我确定它真的很傻，但我似乎无法找到这种行为的根本原因。

对于视觉参考，我正在使用此网站http://www.kasiapukeca.com，当您访问该网站时，一切看起来都很好。现在放大到100％以上，比如125-150％+。我的问题是，当导航内容拉伸时，顶部导航栏的画布区域不会自动填充到右侧。有什么想法吗？

我尝试过宽度：100％和宽度：自动，这似乎还没有解决它。奇怪的是当我手动指定像width：3000px这样的宽度尺寸时，背景会延伸出来。

Answer 1

我在kp-stack1之前看到一个div，它没有类ID。那个div正在阻止导航栏随之拉伸。

你应该给那个div一个容器的id并弄乱它的宽度以获得你想要的结果。

编辑：实际上，我只是再看一眼。 HTML的宽度仅为900px。您希望HTML覆盖整个页面，以便身体也可以进一步水平移动。如果您将主体设置为1500px，您将看到导航栏将根据您的需要进行扩展。

由于某种原因，我似乎无法在整个屏幕上扩展HTML，也许比我更聪明的人可以解决这个问题。

Answer 2

你的'BODY'被切断了，因为一般来说你的页面没有响应..意思是，如果你的元素的固定宽度将超过视口的宽度，你将获得一个水平滚动条，你不想要的，因为那时你的身体会被切掉..我的建议是将这些添加到你的css作为起点..然后调整以获得你想要的最终结果：

CSS

html, body      { width:100%;}
#kp-stack1      { background-size:contain;}
.stackWrapper   { width:100%;}
#kp-card        { width:50%; min-width:304px; max-width:320px; box-sizing:border-box;}
#kp-pricehome   { width:45%; box-sizing:border-box;}

注意虽然缩放时导航会被剪切..您需要考虑如何处理此问题，或者减少字体大小以使条带保持在视口内..或者某些其他解决方案......