1

この質問を正しく表現するのは難しいですが、固定高コンテナで同じ高さを共有する 2 つの div を作成したいと考えています。したがって、#container 要素の高さは 500px などに固定されます。#upper 要素と #lower 要素は、その存続期間中に縦横に大きくなったり小さくなったりしますが、500 ピクセルを超えることはありません。内側の 2 つの要素がオーバーラップし始めると、最大の高さに達し、ユーザーがスクロールバーを使用できるようになります。

物事を明確にするために写真を含めました：

そして、私がやりたいことを概念的に示すいくつかのサンプル (動作しない) CSS:

#container {
    position: absolute;
    height: 500px;
}

#upper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 10%;
    max-height: 90%;
    overflow: auto;
}

#lower {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 10%;
    max-height: 90%;
    overflow: auto;
}
4

2 に答える 2

0

CSS の使用:

要素の高さをその親の高さ (またはそのパーセンテージ) に制限することが可能です。

別の要素の高さに基づいて動的に制限することはできず、実際のプログラミング言語 (つまり、javascript) が必要になります。

補足として、この機能が必要になると想定できる唯一の状況は (両方の要素で max-height:50%; を設定するのではなく) とにかく JavaScript を使用して要素を設定する場所です...?

于 2012-12-05T03:20:14.147 に答える
0

次のベローズを試すこともできますが、私の想像以上の何かがあれば、これはより簡単になります。

http://codepen.io/DanielMinett/pen/uEdFv

#container {
  width: 300px;
  height:500px;
  background-color: #CCCCCC;
  padding: 15px;
  position:relative
}

#upper {
  background-color: #1E90FF;
  min-height: 10%;
  max-height: 90%;
  padding-top: 3px;
  padding-left: 5px;
}

#lower {
  background-color: #EE8833;
  min-height: 10%;
  max-height: 90%;
  padding-top: 3px;
  padding-left: 5px;
  position:absolute;
  bottom:0;
于 2012-12-05T02:31:10.593 に答える