html - HTMLページパーツ

Question

HTMLページを測定し、その40％または60％の長さを見つけて、ページの特定の要素がその量しか占有できないようにする方法はありますか？

Answer 1

はい、CSSではこれは非常に簡単です

<div style="width: 70%;"> this will take up 70% of your width </div>

Answer 2

（水平方向の配置に関して）2つのdiv要素とCSSを使用して、このようなスタイリング/マークアップを実現できます。

<!--Your HTML-->
<div id="fortypercent" class="next_to_each_other"></div>
<div id="sixtypercent" class="next_to_each_other"></div>
<!--Ends here-->

/***Your CSS***/
div.next_to_each_other {position:relative; float:left;}
div#fortypercent {width:40%;}
div#sixtypercent {width:60%;}
/***Ends here***/

それで全部です。

（垂直方向の配置に関して）2つのdiv要素とCSSを使用して、このようなスタイリング/マークアップを実現することもできます。今回のマーキングは同じで、スタイリングは以下の通りです。

/***Your CSS***/
html, body {width:100%; height:100%; margin:0px; padding:0px;}
div.next_to_each_other {position:relative; float:left;}
div#fortypercent {width:100%; height:40%;}
div#sixtypercent {width:100%; height:60%;}
/***Ends here***/

各divに異なる背景色を割り当てることで、機能するかどうかを確認できます。

Answer 3

JavaScriptを知っている必要がありますが、これは簡単に実行できます。

このステートメントは、「foo」にピクセル単位のid「bar」の長さを与えます。

foo = document.getElementById('bar').offsetHeight;

あなたがそれからするなら

height1 = foo * 0.4;
height2 = foo * 0.6;

あなたはそれをするために使うことができます

document.getElementById('height1').style.height = height1 + 'px';
document.getElementById('height2').style.height = height2 + 'px';

この方法を使用すると、要素の高さを確認し、最初の要素に基づいて他の要素の高さを設定できます。

追加してほしいものがあれば教えてください！