Home >Web Front-end >HTML Tutorial >CSS和js 控制自动高度的问题_html/css_WEB-ITnose
CSS和js 控制自动高度的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:28:011320browse
我想要图片整个页面的高度和浏览器可见区域一样；
上面和下面的高度是固定的；
中间部分的高度自动，若中间的内容超出后中间部分自动滚动；
中间部分的高度会随着浏览器大小的变化改变。
求大神明示，用CSS如何做到，或者CSS结合JS怎么做到？
回复讨论(解决方案)
试试这个，我用的jquery
<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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：：有谁解决过微信内置浏览器不兼容浮动的_html/css_WEB-ITnoseNext article：ul li 横排（float：left） ie6多出间距_html/css_WEB-ITnose