0

次のコードには、コンテナの上部に配置する必要があるDIVがあり、もう1つは下部に配置する必要があり、コンテンツは中央に配置する必要があります。

<div style="position:absolute; top:0; width:100%; height:40px"></div>

<div class="howto"></div>

<div style="position:absolute; bottom:0; width:100%; height:40px"></div>

したがって、含まれているDIVの高さはわかりません。JSがない場合、クラスのあるdivhowtoは、コンテナーDIVの高さから上下の絶対位置のdivの高さを差し引いて、これら2つのDIVの間にコンテンツを含めることができます。

4

2 に答える 2

1

あなたが達成したいことのために、これは1つの可能な解決策です：

@tinkerbin：http ://tinkerbin.com/QsaCPgR6

HTML：

<div class="container">
    <div class="header"></div>

    <div class="howto">
      Has height set to auto. You may change that if you want to.
    </div>

    <div class="footer"></div>
</div>

CSS：

.container {
  position: relative;
  padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}

.header,
.footer {
  position: absolute;
  height: 40px;
  width: 100%;
}

.header {
  top: 0;
}

.footer {
  bottom: 0;
}

.howto {
  height: /*specifiy one if you wish to*/;
}
于 2012-07-30T13:18:35.093 に答える
0

私の知る限り、JSなしでやろうとしていることを行うための純粋なCSSの方法はありません。

SAに関するこの以前の投稿を参照してください。

残りの画面スペースの高さをdivで埋めるようにします

于 2012-07-30T11:41:07.230 に答える