0

私はこのjsfiddleのようなものを持っています

<div id="foo">
  <div>
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </div>
</div>


 #foo {
   position: absolute;
   min-height: 300px;
   width: 400px;
 }

 #foo > div {
   position:relative;
 }

 .header, .footer {
   min-height: 30px;
 }

「#foo > div」が #foo に設定された 300px の高さを占めるようにするにはどうすればよいですか? 「.footer」を「#foo > div」の一番下にも固定したい。「.main」は、空であっても残りのスペースを埋める必要があり、コンテンツが保証する場合はスクロール可能になります。

私はこれに数時間苦労してきたので、今こそ教祖に尋ねる時です. フィドルの助けをいただければ幸いです。ありがとう！

4

3 に答える 3

1

次のようなものを探しているかもしれません:

http://jsfiddle.net/audetwebdesign/V2gdj/4/

次の CSS を使用します。

div {
    border: 1px solid gray;    
}

#foo {
    position: absolute;
    height: 300px;
    width: 400px;
}

#foo > div {
    position: relative;
    height: inherit;
}

.header, .footer {
    height: 30px;
}
.main {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;
    right: 0;
    outline: 1px solid blue;
    overflow: auto;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

あなたのコメントについての説明は保留中です。

于 2013-06-07T19:42:14.087 に答える
0

まず、整理すべきエラーがいくつかあります。HTML では と呼びますfotterが、CSS では ですfooter。次に、HTML ではクラスが割り当てられた div がありますが、CSS では ID を選択しています。一方を他方に変更すると、正しい軌道に乗っています。

フッターを一番下に固定するには、CSS でこれを試すことができます。

.main {min-height: 240px;}

探しているものかどうかを確認するためのフィドルは次のとおりです。http://jsfiddle.net/Jzq2Q/

幸運を祈ります。

于 2013-06-07T19:42:48.333 に答える