ページの高さまたは div のパーセンテージが無効な場合はどうなりますか?

说 1. ページを占有したい場合、または DIV パーセンテージの問題について、あなたも検索したことがあると思います。つまり、祖先 HTML がパーセンテージを設定する必要があるまで、父と父を設定する必要がある、と一度言ったことがありますか。効果的であること。

一言で言えば、高さをパーセンテージで設定したい場合は、その親の少なくとも 1 つが固定の高さを持たなければなりません。そうしないと、すべての親が祖先 html に到達してしまいます (html の外側はブラウザーであるため)。高さがあります)

パーセンテージを設定する必要があります 。 もちろん、position:absolute,fixed などのドキュメント フローの外にある div は除外する必要があります。その親はブラウザーであると考えられるため、ブラウザーの高さは常に有効です。到達する。

2. パーセンテージが直接使用されない場合があります。この場合、高さ: calc(100% - 1rem); を使用できます。 ); など、高さのパーセンテージも使用されるため、この状況の有効な条件も最初のポイントで説明する必要があります。

今日のレスポンシブ レイアウト要件では、サイズを自動的に調整できる多くの要素は高さと幅に適応できます。たとえば、img は、{width:50%;height:auto;} を使用して画像の高さを調整します。幅比。

ただし、最も一般的に使用されるタグ Div は、自動的に調整することはできません (親から継承するか、px を単独で指定するか、パーセンテージを指定するかのいずれかです。ただし、このパーセンテージは親の高さに基づいて計算されます。まったく調整されません)要素自体の幅、Div の幅と高さは特定の比率に達することはできません =-=)。 （この機能(DIV高さ:幅=1:1)を実現するには、さまざまなBUFFを通じていくつかの処理方法があることがわかります

1、適応的な

div{を実現するにはdiv+zoomの幅高さを直接指定します。 width:50px;heigth:50px;zoom:1.1;}

これにより、初期の等しい幅と高さ div を実現できますが、制限が大きすぎます。合格!

2、js を介して div の幅を動的に決定し、高さを設定します

div{width:50%;}

window.onresize = function(){div.height(div.width);}

はできます幅と高さの div も実装されますが、いつも少しぎこちなく感じます。パス!

3、幅と高さの単位で設定します

div{width:20vw;height:20vw;/*20vw はビューポートの幅の 20%*/}

しかし、多くのデバイスはこの属性をサポートしておらず、互換性も高くありません可哀想、パス！

4、float で設定

#aa{background:#aaa;;}

#bb{background:#ddd;;float:left}

#cc{background:#eee;;float:right}

< ;div id="aa">親 div

;