2

最大の高さ/幅が設定された親 div があります。CSSだけを使用して、2つの子divをパーセンテージに基づいて高さを自動的に調整するように設定できるかどうか疑問に思っていましたか?

HTML:

<div id="parent">
    <div id="top"></div>
    <div id="bottom"></div>
</div>

CSS:

html, body {
    height: 100%;
    width: 100%:
}    

#parent {
    max-width: 400px;
    max-height: 600px;
}

#top {
    height: 30%;
}

#bottom {
    height: 70%;
}

これの意図した実装は、垂直スクロールを強制せずに画面の高さを比例的に埋めるモバイル ディスプレイ用です。

編集:親の高さが固定されている場合、親の高さのパーセンテージが機能することがわかりました。CSS を使用して、画面サイズに合わせて柔軟な高さを許可する方法があるかどうかについては、まだ疑問があります。これは CSS だけでは実現できず、JS の介入が必要なようです。

4

2 に答える 2

5

コードに問題はありません。div に 100% の高さと幅を追加するだけで、必要なものが得られます。max-width/height は値を強制しません (高さ/幅は auto のままです)。これが実用的なフィドルです：

http://jsfiddle.net/b6HVa/

#parent {
  width: 100%;
  height: 100%;
  max-height: 600px;
  max-witdh: 400px;
}
于 2013-07-10T04:13:20.457 に答える
0

私はあなたが正しくやっていると思います。何か問題があれば、デモを見せてください。または設定してみてください

#top{max-height: 30%;}
#bottom{max-height: 70%;}

min-height: {some value}px;または、divに追加します。

于 2013-07-10T04:10:56.410 に答える