Question

我的网站以响应大小工作，当我调整窗口大小时，背景会自动调整到窗口大小。现在我需要一个同样的滚动框（在图片中说明），调整到浏览器窗口的大小，并保持在原来应该的位置。

我目前有这个代码，我不是网站开发人员，所以请善待我哈哈。

＆＃13;

<html>
<head>
<meta charset="utf-8"/>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<style>
div {
	width: 100%;
}

img[usemap] {
		border: none; height: auto; max-width: 100%; width: auto;
}

#background {
	position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: 1;
}

div.text {
	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) {
	$('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>

＆＃13;

它必须对脚本执行某些操作，但我无法弄清楚如何让我的div也使用该jquery脚本...

谢谢！

Answer 1

如果您只想让您的div响应灵活，请使用position：absolute和％for width。请注意，高度并不是真正的响应，但宽度是你应该担心的。

查看重构的＆＃39; div.text＆＃39; css规则：

＆＃13;

<html>
<head>
<meta charset="utf-8"/>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<style>
div {
	width: 100%;
}

img[usemap] {
		border: none; height: auto; max-width: 100%; width: auto;
}

#background {
	position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: 1;
}

div.text {
	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) {
	$('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>

＆＃13;

一般情况下，我不会使用这个脚本，并且会阅读更多关于CSS的内容，例如使用背景图像和背景大小的css3规则，这些规则将比这个库更好地调整背景大小。< / p>

响应div，怎么做

1 个答案: