3

兄弟のdiv Bの高さを調整できるようにしながら、div Cが親のdiv Aの残りの高さを埋めるようにします。これは CSS のみ (javascript なし) で可能ですか?

他の同様の質問には、「div C を絶対に配置する」という回答がありましたが、内容に応じて div B の高さを可変にしたいので、うまくいきません。

+---------------------------------------+
| D +---------------------------------+ |
| i | div B (min and variable height) | |
| v +=================================| |
|   |               ^                 | |
| A |               |                 | |
|   |              div C              | |
|   |      (remainder of height)      | |
|   |               |                 | |
|   |               v                 | |
|   +---------------------------------+ |
+---------------------------------------+
4

4 に答える 4

5

上部の div を float: left および width: 100% に設定するとどうなりますか?

私は JSFiddle でテストしようとしましたが、うまくいくようです。

コードはこちらです。

于 2012-07-21T04:34:38.833 に答える
4

これはおそらく実行可能ではありません (非常に最新のブラウザーのみが実装しています) が、フレキシブル ボックス モデルはこのような問題を解決するためのものであることに言及する価値があるかもしれません。例 ( jsfiddle ):

HTML:

<div id="container">
    <div class="top">Hello there.</div>
    <div class="bottom">Hello to you as well!</div>
</div>

CSS:

body, html {
    height: 100%;
}

#container {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Set a hard-to-work-with height */
    height: 82%;
    border: 1px solid #000;
}

.top {
    -webkit-box-flex: 1;
}

.bottom {
    /* Emphasize that we want the bottom to take up more space */
    -webkit-box-flex: 10;
    background: #999;
}

編集: ここでさらに読む: http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

于 2012-07-21T04:27:47.817 に答える
1

別の方法を次に示します。

参考： jsFiddle

これは div ではなく、代わりに a を使用して 内部および要件を処理します。float#divWrapper#divTop#divBottom

HTML:

<div id="divContent">

    <div id="divWrapper">

      <div id="divTop">
        <p>This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />        
           The 'background-color' aqua is the size of this div B. <br />
            <b>Note CSS 'min-height' is optionally used for this div. </b>
        </p>
      </div>

      <div id="divBottom">
        <p>The remainder of the space is used by div C. Line 01 <br />
           The remainder of the space is used by div C. Line 02 <br />
           The remainder of the space is used by div C. Line 03 <br />
           The remainder of the space is used by div C. Line 04 <br />
           The remainder of the space is used by div C. Line 05 <br />
           The remainder of the space is used by div C. Line 06 <br />
           The remainder of the space is used by div C. Line 07 <br />
           The remainder of the space is used by div C. Line 08 <br />
           Since this div is secondary, contents may clip. Line 09 <br />
           The remainder of the space is used by div C. Line 10 <br />
           The remainder of the space is used by div C. Line 11 <br />
           The remainder of the space is used by div C. Line 12 <br />
           The remainder of the space is used by div C. Line 13 <br />
           The remainder of the space is used by div C. Line 14 <br />
          </p>
      </div>

    </div>

</div>

CSS:

#divContent {
    background-color: yellow;
    border: 3px solid red;
    width:400px;
    height: 400px;
}

#divWrapper {
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
    position: relative;
    border: 1px solid black;
    overflow: hidden;
}

#divTop {
    background-color: aqua;
    min-height: 155px;          /* Optional minimum height setting */
}

#divBottom {
    background-color: pink;
    width: 100%;
}


#divTop:hover, #divBottom:hover {
    background-color: white;
}
于 2012-07-21T06:31:40.790 に答える
1

を使用せずに を「偽造」することで、これを行うことができますtable。

divテーブルのtr, td構造を模倣する構造を設定し、CSS を として表示するように設定divするだけtableです。

http://jsfiddle.net/Kyle_Sevenoaks/EYuNz/3/

(コンテンツを含む div をクリックしてさらに追加すると、可変の高さが表示されます)

于 2012-07-21T04:30:35.527 に答える