html - フロート レイアウトの CSS スケール div

Question

height プロパティを使用せずに自動スケーリング レイアウトを作成したい。画像に示すように、2 つの div 間でフロート レイアウトを使用します。中央のボックスには異なるサイズのコンテンツがあり、すべて同じ高さになるようにボックスをスケーリングしたいと考えています。

Answer 1

css-tricks でこの記事を読んでみてください。

私のお気に入りの選択肢は、おそらくHTML5Rocksの Paul Irish のブログから引用したものですが、最新のブラウザーに依存しています。彼のコードに基づいてJSFiddleを作成しました。

CSS

.box {
  /* basic styling */
  width: 100%;
  height: 95px;
  border: 1px solid #555;
  font: 14px Arial;
  /* flexbox setup */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  display: -moz-box;
  -moz-box-orient: horizontal;
  display: box;
  box-orient: horizontal;
}

.box > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

/* our colors */
.box > div:nth-child(1){ background : #FCC; }
.box > div:nth-child(2){ background : #CFC; }
.box > div:nth-child(3){ background : #CCF; }

HTML

<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

ただし、これは従来のブラウザーでは機能しないことに注意してください。それらをターゲットにしている場合は、テーブル レイアウトを採用することをお勧めします。

Answer 2

JsFiddleを作成しました。

私が基本的に行うことは、とCSS プロパティをposition:absolute組み合わせて使用​​して、内側の div を強制的に全高にすることです。topbottom

HTML:

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

CSS:

body{
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#top{
    width: 100%;
    height: 30px;
    background: blue;
    position: absolute;
}

#bottom{
    width: 100%;
    height: 30px;
    background: yellow;
    position: absolute;
    bottom: 0px;
}

#middle{
    width: 30%;
    position: absolute;
    top: 30px;
    bottom: 30px;
    background: gray;
}