Rumah >hujung hadapan web >html tutorial >CSS和js 控制自动高度的问题_html/css_WEB-ITnose
CSS和js 控制自动高度的问题_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 09:28:011320semak imbas
我想要图片整个页面的高度和浏览器可见区域一样；
上面和下面的高度是固定的；
中间部分的高度自动，若中间的内容超出后中间部分自动滚动；
中间部分的高度会随着浏览器大小的变化改变。
求大神明示，用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> Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：：有谁解决过微信内置浏览器不兼容浮动的_html/css_WEB-ITnoseArtikel seterusnya：ul li 横排（float：left） ie6多出间距_html/css_WEB-ITnose