18

ビューを 4 つの部分に分割します。ページ全体の幅と固定の高さを使用した上部のヘッダー。

残りのページは同じ高さの 2 つのブロックに分割され、その上部には同じサイズのブロックが 2 つ並んでいます。

私が試したのは（ヘッダーなしで）です：

#wrap {
  width: 100%;
  height: 100%;
}

#block12 {
  width: 100%;
  max-height: 49%;
}

#block1,
#block2 {
  width: 50%;
  height: 100%;
  float: left;
  overflow-y: scroll;
}

#block3 {
  width: 100%;
  height: 49%;
  overflow: auto;
  /*background: blue;*/
}

.clear {
  clear: both;
}

<div id="wrap">
  <div id="block12">
    <div id="block1"></div>
    <div id="block2"></div>
    <div class="clear"></div>
  </div>
  <div id="block3"></div>
</div>

どうやら、高さのパーセンテージ値を使用してもうまくいきません。どうしてこんなことに？

4

6 に答える 6

7

親要素に高さが設定されていない要素にパーセンテージの高さを設定すると、親要素にはデフォルトがあります

height: auto;

未定義の値から高さを計算するようブラウザに要求しています。これは null 値に等しいため、結果として、ブラウザは子要素の高さについて何もしません。

JavaScript ソリューションを使用する以外に、この非常に簡単なテーブル メソッドを使用できます。

#parent3 {
    display: table;
    width: 100%;
}

#parent3 .between {
    display: table-row;
}

#parent3 .child {
    display: table-cell;
}

http://jsbin.com/IkEqAfi/1でプレビュー

  • 例 1: 機能しない
  • 例 2: 高さを固定
  • 例 3: テーブル メソッド

ただし: table メソッドは、最新のすべてのブラウザーと Internet Explorer 8 以降でのみ適切に機能することに注意してください。フォールバックとして JavaScript を使用できます。

于 2013-09-30T10:28:20.373 に答える
0

基本的に、問題はブロック 12 にあります。block1/2 が block12 の全高を占めるようにするには、高さが定義されている必要があります。このスタック オーバーフローの投稿では、非常に詳細に説明されています。

したがって、block12 の定義済みの高さを設定すると、適切な高さを設定できます。block12 div がページ全体で標準の高さに設定されている場合、ブロックを隣り合わせにフローティングできることを示すJSfiddle の例を作成しました。

これは、いくつかのコンテンツを含むヘッダーとブロック 3 div を含む例です。

#header{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:20%;
    }

    #block12{
    position:absolute;
    top:20%;
    width:100%;
    left:0;
    height:40%;
    }
    #block1,#block2{
    float:left;
    overflow-y: scroll;
    text-align:center;
    color:red;
    width:50%;
    height:100%;

    }
 #clear{clear:both;}
 #block3{
    position:absolute;
    bottom:0;
    color:blue;
    height:40%;

    }
于 2013-09-30T09:26:13.900 に答える
0

div はその親の高さを取りますが、(div を除いて) コンテンツがないため、そのコンテンツと同じ高さになります。

body と html の高さを設定する必要があります。

HTML:

<div class="block12">
    <div class="block1">1</div>
    <div class="block2">2</div>
</div>
<div class="block3">3</div>

CSS:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.block12 {
    width: 100%;
    height: 50%;
    background: yellow;
    overflow: auto;
}
.block1, .block2 {
    width: 50%;
    height: 100%;
    display: inline-block;
    margin-right: -4px;
    background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
    width: 100%;
    height: 50%;
    background: lightblue;
}

そしてJSFiddle

于 2013-09-30T08:16:45.023 に答える