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

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

WBOY

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

オリジナル

1243 人が閲覧しました

モバイル 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>

ログイン後にコピー

以上です。テストに役立ちます

他の上部と下部は問題ありませんが、20% の下端が 70% の上端と一致している必要があります。それでも 20% は上にあります。 70%。

html,body{

高さ:100%;マージン: 0;

オーバーフロー:非表示;
}
#top{

高さ:70%

}

#top #top_float_bar{
高さ:2 0%
}

#フッター {
高さ:30% }