水平滚动低于 1000 宽度答案

【问题标题】：Horizontal scroll below 1000 width水平滚动低于 1000 宽度
【发布时间】：2013-03-18 20:13:23
【问题描述】：

我现在挣扎了几天，我找到了一个似乎不起作用的解决方案。

无论如何，当有人拖动 宽度小于 1000 像素的窗口时，我要做的是“锁定”屏幕。我的意思是，水平滚动条必须出现，背景图像必须停止调整大小，文本停止移动。当达到低于 1000 像素以及文本时，背景必须成为水平滚动。

希望有人可以帮助我，现在尝试了两天：s

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Hup</title>


<style type="text/css">
html{

    background: url(jup.png) no-repeat center center fixed;
    min-width:500px;
    max-height: 500px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:auto 580px;
    background-position: center 120px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='jup.png',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='jup.png', sizingMethod='scale');
}

#menu {
    position:absolute;
    margin-top:80px;
    margin-left:20px;
    position:absolute;
right:20px;
}
.menu_container {
    width:500px;
    overflow:hidden;
    position:absolute;
    display:none;
    height:100px;
}
#bottom {
    position:absolute;
    margin-top:720px;
    position:absolute;
    left:20px;
    white-space: nowrap;
}
.bottom_container {
    width:500px;
    overflow:hidden;
    position:absolute;
    display:none;
    height:100px;

}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;

}
body {
    min-width:1024px;
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style>
</head>

<body>

<div id="menu">
<div class="container">
Text here
</div>

</div>
<div id="bottom">
<div class="container">
Text here
</div>

</div>

</body>
</html>

【问题讨论】：

您的 html 最小和最大宽度与您为 html 标记设置的宽度冲突。尝试删除这些设置。
很少见到 HTML 标签的样式。我会将其更改为 body {} 并从下面添加 Adam 的解决方案。
如果我只在html标签中保留最小宽度，或者只在body标签中，背景仍然不会滑动，文本会，但背景不会......

标签： css background scroll

【解决方案1】：

简单：

body { min-width: 1000px; }

【讨论】：

我现在在我的body标签中有这个......即使我删除了html标签中的最小宽度，背景仍然没有滑动......：s
把你的背景图片放在你的身体上（在你的 CSS 中）而不是你的标签。请记住，您正在设置正文的最小宽度，而不是标记。