我想要图片整个页面的高度和浏览器可见区域一样；
上面和下面的高度是固定的；
中间部分的高度自动，若中间的内容超出后中间部分自动滚动；
中间部分的高度会随着浏览器大小的变化改变。
求大神明示，用CSS如何做到，或者CSS结合JS怎么做到？
回复讨论(解决方案)
试试这个，我用的jquery
1 | <html> <head> <meta charset=utf-8> <script src="jquery-1.11.1.min.js"type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function() { areaResize(); $(window).resize(function() { areaResize(); }); }); function areaResize() { var sHeight = self.innerHeight; var sWidth = self.innerWidth; $(".bg").css({ "height": sHeight-200, "width": sWidth }); $(".header").css({ "height":" 100px", "width": sWidth }); $(".footer").css({ "height":" 100px", "width": sWidth }); }; </script> <style type="text/css"> .bg{ background-color: red; overflow: auto; } .header{ background-color: blue; } .footer{ background-color: black; } </style> </head> <body> <div class="header"></div> <div class="bg"> 设置 CSS 属性 设置所有匹配元素的指定 CSS 属性。 $(selector).css(name,value) 参数 描述 name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。 value 可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。 如果设置了空字符串值，则从元素中删除指定属性。 实例 将所有段落的颜色设为红色： $("p").css("color","red"); 亲自试一试 使用函数来设置 CSS 属性 设置所有匹配的元素中样式属性的值。 此函数返回要设置的属性值。接受两个参数，index 为元素在对象集合中的索引位置，value 是原先的属性值。 $(selector).css(name,function(index,value)) 参数 描述 name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。 function(index,value) 规定返回 CSS 属性新值的函数。 index - 可选。接受选择器的 index 位置 oldvalue - 可选。接受 CSS 属性的当前值。 实例 1 将所有段落的颜色设为红色： $("button").click(function(){ $("p").css("color",function(){return "red";}); }); </div> <div class="footer"></div> </body></html>
|
로그인 후 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
