ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSとjs_html/css_WEB-ITnoseによる自動高さ制御の問題
CSSとjs_html/css_WEB-ITnoseによる自動高さ制御の問題
- WBOYオリジナル
- 2016-06-21 09:28:011319ブラウズ
画像のページ全体の高さをブラウザの表示領域と同じにしたい;
上部と下部の高さは固定です
中央部分の高さは自動です。中央のコンテンツが中央部分を超えると、中央部分が自動的にスクロールします。
中央部分の高さは、ブラウザーのサイズが変わると高さも変わります。
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> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。