Question

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

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

希望有人可以帮助我，现在尝试两天：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>

Answer 1

易：

body { min-width: 1000px; }

水平滚动低于1000宽度

1 个答案: