3

我希望 div C 填充父 div A 的剩余高度，同时允许兄弟 div B 具有可调节的高度。仅使用 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

您可以通过“伪造” a 来做到这一点table，而不使用一个。

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

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

（单击带有内容的 div 以添加更多内容，它会显示可变高度）

于 2012-07-21T04:30:35.527 回答
1

这是另一种方法。

参考： jsFiddle

这个不是 floatdiv 而是使用 a#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 回答