我現在掙扎了好幾天,而且我找到了一個似乎沒有用的解決方案。1000寬度以下的水平滾動
無論如何,我想要做的是當有人拖動窗口小於1000 px的寬度'鎖定'屏幕。我的意思是,必須出現一個水平滾動條,並且背景圖像必須停止調整大小,並且文本停止轉移。背景必須在達到1000像素以下時才能水平滾動以及文字。
希望能有人能幫助我,想對現在看兩天:■
<!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 MIN-和最大寬度與已設置寬度衝突html標籤。嘗試刪除這些設置。 – Jost 2013-03-18 20:16:29
很難看到HTML標籤的樣式,因爲您擁有它。我會將其更改爲body {}並從下面添加Adam的解決方案。 – isherwood 2013-03-18 20:16:47
如果我只保留html標籤中的最小寬度,或者只保留在body標籤中,背景仍然不會滑動,文字會,但背景不會... – 2013-03-18 20:43:51