ホームページ >ウェブフロントエンド >htmlチュートリアル >携帯電話は2層に分かれており、高さを設定する方法。 _html/css_WEB-ITnose
携帯電話は2層に分かれており、高さを設定する方法。 _html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:43:061340ブラウズ
モバイル UI で、TOP が上部、FOOTER が下部、OP_float_bar が TOP 内の下部に 3 つの DIV を配置したいのですが、この DIV の高さを設定するにはどうすればよいですか?
#top {幅:100%; 高さ:? ? ? ;}
6c04bd5ca3fcae76e30b72ad730ca86d
488a6885bf584ce482400a6e10a61400 //上部レイヤーは電話全体の高さの 70% を占めます
9e8cc26d18746b6ff5de8d77d81214c9上層、上層下、上層の 20% を占めます
16b28748ea4df4d9c2150843fecfba68
171c8477c82d74a9b2eea84eaab93167携帯電話全体の高さの 30%
16b28748ea4df4d9c2150843fecfba68
ディスカッションへの返信 (解決策)
投稿者が手動で設定することを主張する場合は、jq を使用できます<!DOCTYPE html><html><head><script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(function() { //获取页面的可视区域高度和宽度 var wHeight=document.documentElement.clientHeight; var footerH= $("#footer").height(); var newH=wHeight-footerH+"px"; //alert(footerH.height()); $("#top_float_bar").css("height",newH);}); </script></head><body><div id="top" style="background:yellow;">123</div><div id="footer" style="height:300px;width:500px;background:red;"></div></body></html> コードは参考用です。
申し訳ありませんが、値を割り当てるときに px を追加する必要はありません。
<!DOCTYPE html><html><head><script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(function() { //获取页面的可视区域高度和宽度 var wHeight=document.documentElement.clientHeight; var footerH= $("#footer").height(); var newH=wHeight-footerH; //alert(footerH.height()); $("#top").css("height",newH);}); </script></head><body><div id="top" style="background:yellow;">123</div><div id="footer" style="height:300px;width:500px;background:red;"></div></body></html> 以上です。テストに役立ちます
他の上部と下部は問題ありませんが、20% の下端が 70% の上端と一致している必要があります。それでも 20% は上にあります。 70%。
html,body{
オーバーフロー:非表示;
}
#top{
}
#top #top_float_bar{
高さ:2 0%
}
高さ:30% }
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。