携帯電話は2層に分かれており、高さを設定する方法。 _html/css

携帯電話は2層に分かれており、高さを設定する方法。 _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-06-24 11:43:06

オリジナル

1391 人が閲覧しました

モバイル UI で、TOP が上部、FOOTER が下部、OP_float_bar が TOP 内の下部に 3 つの DIV を配置したいのですが、この DIV の高さを設定するにはどうすればよいですか?
#top {幅:100%; 高さ:? ? ? ;}

//上部レイヤーは電話全体の高さの 70% を占めます

上層、上層下、上層の 20% を占めます

ディスカッションへの返信 (解決策)

投稿者が手動で設定することを主張する場合は、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>