8

サイトの残りの部分を空白にする、ある種のスクロール可能なオーバーレイを作成しようとしています。固定要素内の絶対要素の高さを100％取得できないようです。

http://codepen.io/intellix/pen/GBltK

section {
  background: red;
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow-x:auto;

}

article {
  background: blue;
  position: absolute;
  top:0;
  width:300px;
  bottom: 0;
  left: 0;
}

ボトムを設定した場合：0; 絶対要素では、ページがオーバーフローしないときに高さを埋めます。ページがオーバーフローすると、ギャップが残ります。

絶対要素でbottom：autoを使用すると、高さがオーバーフローで埋められますが、オーバーフローなしでギャップが残ります。

コンテンツが収まるようにウィンドウのサイズを変更してから、コンテンツが収まらないようにサイズを変更すると、どちらの場合も機能しないことがわかります。

4

1 に答える 1

10

ここではmin-heightとbottom：autoを使用したいと思います。

article {
  background: blue;
  position: absolute;
  top:0;
  width: 300px;
  bottom: auto;
  min-height: 100%;
  left: 0;
}

必要min-height:100%;で使用できない理由height:100%;はsection、スクロール可能なコンテンツの高さが実際には100％を超えているためです。

より長い説明：

配置された（position: relative|fixed|absolute;）要素では、パーセンテージベースの高さがオフセットされた親を基準にして決定されます。要素の場合、articleオフセットされた親がsection要素です。

section要素はとを使用top:0px;しbottom:0px;て高さを決定します。これらの値は、html要素であるオフセットされた親の高さによって決定されます

htmlは、表示可能なウィンドウのサイズである特殊なケースheight:100%;です。これが、スクロール可能な要素の高さが100％を超える理由です。

于 2013-03-05T22:41:55.943 に答える