如何正确将宽度设置为百分位数并保持最小宽度（以像素为单位）？

Question

所以我有一个标题/导航栏 div，这个 div 有一个 repeat-x 背景图像。 比我有一个以该背景为中心的水平导航，但需要最小宽度和正常宽度。

我希望它显示为 80% 宽度，最小宽度 1000 像素，并居中。

CSS

.center-wrap {
width: 80%;
min-width: 1000px;
margin: 0 auto;
}
#bar {
width: 100%;
height: 50px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
}

HTML

<div id="bar">
    <div class"center-wrap">
        UL LI HERE
    </div>
</div>

错误

现在的问题是，如果我将页面大小调整到 1000 像素以下，repeat-x 背景图像会被切断（滚动时 -> 以显示网站的其余部分）。

如何将我的 repeat-x 背景图像保持在 #bar 上并保持 center-wrap 居中并包含最小宽度和百分位宽度？

Answer 1

将此添加到您的 Css 中，Magic！ :D

body{min-width: 1000px;}

问题在于主体将窗口对象宽度作为最大宽度，而后代则将该宽度作为遗产。会发生什么：

您将窗口（浏览器）的大小调整为 300px 宽度，然后 body 的宽度 = 300px，然后 .center-wrap = 300px 的 80%，因此将 body 的 min-width 设置为固定数字即可解决此问题