较小的分辨率，内容试图适应答案

【问题标题】：Smaller Resolution, Content Tries To Fit较小的分辨率，内容试图适应
【发布时间】：2011-08-21 17:25:11
【问题描述】：

如果您在访问时会注意到...http://www.thebattleforarcadia.com/construction/index.html 当您缩小屏幕尺寸时，顶部栏的内容会溢出它的父 div 并覆盖网站的其余部分。

我想要做的是，如果接收端的分辨率太小，我想强制他们必须使用底部的滚动条，以便他们可以看到所有内容。只是为了正确显示网站。

有什么编码想法吗？

谢谢你，亚伦

【问题讨论】：

这是在什么浏览器中发生的？没看到……
通常使用溢出属性

标签： css xhtml position overflow resolution

【解决方案1】：

添加...

min-width: 1260px;

在 #news-容器 CSS 规则。

您的网站将在 1280x** 分辨率下正常显示，但在小于该分辨率（宽度）的任何地方都会有一个垂直滚动条。

也许您可以将最小宽度设为 960 像素并将文本扩展为两行（稍微推动顶部图形）？只是一个建议

编辑：这是一个例子

#news-content {
float: left;
padding-left: 25px;
padding-top: 12px;
overflow: auto;
padding-bottom: 20px;
}
#news-container {
width: 100%;
background: url(images/news-background.png) repeat-x left bottom;
z-index: 10;
}
#news-header {
width: 150px;
height: 23px;
float: left;
padding-left: 25px;
}

上面的例子会在分辨率缩小时使标题“展开”，而不强制屏幕宽度

【讨论】：

非常感谢，是的，我将这个更改应用于#news-container，但是一旦我将它缩小到非常小的尺寸，它看起来很奇怪。所以我所做的也应用了 min-width: 1260px;到正文标签。现在它可以工作/看起来很棒！非常感谢！

【解决方案2】：

给body 元素或任何其他设置宽度的元素，您希望min-width 与之匹配。这应该确保每当以较小的分辨率查看页面时都有一个水平滚动条

查看这里Commonly used pixel sizes for webpages and their pros/cons。

【讨论】：

非常感谢，我必须用下面的答案来实现这个答案。