響應div，怎麼做

我得到我的網站作爲響應大小，當我調整窗口的大小時，背景會自動調整到窗口大小。現在我需要一個滾動框（在圖片中解釋），可以調整瀏覽器窗口的大小，並保持在相同的位置。響應div，怎麼做

目前，我有這個代碼，我不是一個網站開發人員，所以請善待我，哈哈。

<html> 
 
<head> 
 
<meta charset="utf-8"/> 
 
<link rel="favicon" type="image/ico" href="favicon.ico"/> 
 
<title>Rolling Barrel :: Sport & Game</title> 
 
<style> 
 
div { 
 
\t width: 100%; 
 
} 
 

 
img[usemap] { 
 
\t \t border: none; height: auto; max-width: 100%; width: auto; 
 
} 
 

 
#background { 
 
\t position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: 1; 
 
} 
 

 
div.text { 
 
\t position: fixed; top: 50; left: 50; width: 100px; height: 100px; overflow: scroll; z-index: 2; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div> 
 
<img src="background.jpg" id="background" width="1920" height="936" usemap="#imagemap"/> 
 
<map name="imagemap"> 
 
<area shape="rect" coords="212,103,322,150" href="/home"/> 
 
<area shape="rect" coords="335,103,456,150" href="/nieuws"/> 
 
<area shape="rect" coords="468,103,677,150" href="/kinderfeestjes"/> 
 
<area shape="rect" coords="690,103,918,150" href="/beeldmateriaal"/> 
 
<area shape="rect" coords="930,103,1057,150" href="/contact"/> 
 
<area shape="rect" coords="1070,103,1201,150" href="/verhuur"/> 
 
<area shape="rect" coords="1212,103,1354,150" href="/zakelijk"/> 
 
<area shape="rect" coords="1364,103,1732,150" href="/rolling-barrel-centers"/> 
 
</map> 
 
</div> 
 
<div class="text"> 
 
You can use the overflow property when you want to have better control of the layout. The default value is visible. 
 
</div> 
 
<script src="../jquery/1.js"></script> 
 
<script src="../jquery/2.js"></script> 
 
<script> 
 
$(document).ready(function(e) { 
 
\t $('img[usemap]').rwdImageMaps(); 
 
}); 
 
</script> 
 
</body> 
 
</html>

它做的東西劇本，但我無法弄清楚如何讓我的div也使用jQuery腳本...

謝謝！

來源

2014-12-25 Parqueted

如果你只是想讓你的div敏感和靈活，請使用position：absolute和％來表示寬度。請注意，高度並不是真正的響應，但寬度是你應該擔心的。

見重構「div.text」 CSS規則：

<html> 
 
<head> 
 
<meta charset="utf-8"/> 
 
<link rel="favicon" type="image/ico" href="favicon.ico"/> 
 
<title>Rolling Barrel :: Sport & Game</title> 
 
<style> 
 
div { 
 
\t width: 100%; 
 
} 
 

 
img[usemap] { 
 
\t \t border: none; height: auto; max-width: 100%; width: auto; 
 
} 
 

 
#background { 
 
\t position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: 1; 
 
} 
 

 
div.text { 
 
\t position: absolute; top: 100px; left: 20%; width: 40%; height: 200px; overflow: scroll; z-index: 2; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div> 
 
<img src="background.jpg" id="background" width="1920" height="936" usemap="#imagemap"/> 
 
<map name="imagemap"> 
 
<area shape="rect" coords="212,103,322,150" href="/home"/> 
 
<area shape="rect" coords="335,103,456,150" href="/nieuws"/> 
 
<area shape="rect" coords="468,103,677,150" href="/kinderfeestjes"/> 
 
<area shape="rect" coords="690,103,918,150" href="/beeldmateriaal"/> 
 
<area shape="rect" coords="930,103,1057,150" href="/contact"/> 
 
<area shape="rect" coords="1070,103,1201,150" href="/verhuur"/> 
 
<area shape="rect" coords="1212,103,1354,150" href="/zakelijk"/> 
 
<area shape="rect" coords="1364,103,1732,150" href="/rolling-barrel-centers"/> 
 
</map> 
 
</div> 
 
<div class="text"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 
<script src="../jquery/1.js"></script> 
 
<script src="../jquery/2.js"></script> 
 
<script> 
 
$(document).ready(function(e) { 
 
\t $('img[usemap]').rwdImageMaps(); 
 
}); 
 
</script> 
 
</body> 
 
</html>

在一般情況下，我不會使用這個腳本，並會更多一些關於CSS，就像使用背景圖片和背景大小的css3規則，這些規則可以完成比圖書館更好地調整背景大小的工作。

來源

2014-12-25 21:36:19 ilaif

響應div，怎麼做

回答

相關問題