0

我有个问题。从代码中可以看出，在名为“div1”的 div 中，我有 3 个 div。我希望第一个（黄色）div 位于顶部，第三个（黄色）位于底部，第二个 div（粉红色）填充剩余空间。唯一固定的高度是黄色 div 的高度。你能帮我吗，如何让粉红色的 div 填充剩余的空间？这是我的代码：

<div style="width:100%;background-color: lime;display: table;border-collapse: collapse;">
<div style="display: table-row;">
    <div id=div1 style="display: table-cell;background-color: #0f0;">

        <div style="background-color:yellow;width:100%;height:20px;">s</div>
        <div style="background-color:pink; width:100%;">
            Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa    
        </div>
        <div style="background-color:yellow;width:100%;height:20px;">s</div>
    </div>
    <div style="background-color: #f00;display: table-cell;width:250px">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    </div>
</div>

4

3 回答 3

0

使用一点 javascript，您可以做一些数学运算并计算出粉红色 div 的高度。 

var rightD = document.getElementById('rightDiv');
var yellowD = document.getElementById('yellowD');
var middleD = document.getElementById('middleDiv');
var height = rightD.clientHeight - (yellowD.clientHeight * 2);

middleD.style.height = height + 'px';

http://jsfiddle.net/kX4UB/1/

您不需要声明这么多变量，但我这样做只是为了方便显示。我只是将高度设置为红色 div 的高度减去黄色 div 的高度 x2。请注意，此代码应放在文档中这些 div 之后的 js 标记中。

于 2012-11-13T23:22:35.243 回答
0

有点技巧可以做到这一点：
右侧单元格中的文本更高： http: //jsfiddle.net/UQgXM/2/
左侧单元格中的文本更高：http: //jsfiddle.net/UQgXM/3/

我已将 CSS 与 HTML 分开。主要变化：

  • 给桌子一个高度。这是使单元格中的 div 响应高度设置所必需的。表格高度被忽略。我将其设置为 1%，但表格想要更大。
  • 给定粉红色 div 的高度为 100% 以及一个边距和内边距以正确定位内容。

  • 给定黄色 div（尤其是顶部 div）的 z-index 为 1 和 position: relative 以使其响应 z-index。否则它会落在粉红色的 div 后面。

        <div class="top">s</div>
    <div class="middle">
        Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa    
    </div>
    <div class="bottom">s</div>
</div>
<div class="rightcell">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
</div>

    ​</p>

和CSS：

.table {
    width:100%;
    height: 1%;
    background-color: lime;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
#div1 {
    display: table-cell;
    background-color: #0f0;
}
.top,
.bottom{
    background-color:yellow;
    width:100%;
    height:20px;
    z-index: 1;
    position: relative;
}
.middle {
    background-color:pink; 
    width:100%;
    height: 100%;
    margin: -20px 0;
    position: relative;
    padding: 20px 0;
}
.rightcell {
    background-color: #f00;
    display: table-cell;
    width:250px;
}
​
于 2012-11-13T23:17:14.803 回答
0

必须将其发布为答案才能包含图形。在 Firefox、Chrome 和 IE 中，您的页面看起来就像我认为您所描述的那样： 在此处输入图像描述

这是它应该出现的样子吗？

于 2012-11-13T22:59:49.070 回答