Question

我希望div C填充父div的高度的剩余部分，同时允许兄弟div B具有可调高度。这只能用CSS（没有javascript）吗？

其他类似的问题已被“位置div C绝对”回答，但这对我不起作用，因为我希望div B根据其内容具有可变高度。

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

Answer 1

如果将顶部div设置为float：左侧和宽度：100％怎么办？

我试图在JSFiddle中测试它，它似乎有效。

代码为here。

Answer 2

这对你来说可能是行不通的（只有非常现代的浏览器才能实现它），但值得一提的是，灵活的盒子模型旨在解决这样的问题。一个例子（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/

Answer 3

你可以通过“假装”table而不使用一个来做到这一点。

只需设置一个div结构来模仿表格的tr, td结构，并设置CSS以将div显示为table。

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

（点击包含内容的div以添加更多内容，它会显示变量高度）

Answer 4

这是另一种方法。

参考： jsFiddle

这个不 float div，而是使用#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;
}

最后DIV填充父DIV高度的剩余部分（无JS或绝对位置）

4 个答案: