4

我想#x占用所有可用空间。我该怎么做呢？ 在此处输入图像描述

（PS对不起mspaint）

4

5 回答 5

0

尝试这个

http://jsfiddle.net/bAJpz/4/

CSS

 #contentwrapper {
        height: 100%;
        position: absolute;
    }
    #a, #rw, #x {
        position: relative;
        float: left;
    }
    #a {
        border: #ED1C24 3px solid;
        display: inline-block;
        width: 200px;
        height: 100%;
    }
    #rw {
        display: inline-block;
        border: #FF7F27 3px solid;
        width: 200px;
        height: 50%;
    }
    #x {
        border: #7092BE 3px solid;
        display: block;
        width: 200px;
        height: 50%;
    }
于 2013-07-27T12:51:13.427 回答
0

我在 jsfiddle 中为您创建了一个示例 ：

position: absolute;
height: 100%;
于 2013-07-27T12:53:13.183 回答
0

根据您的图像，您需要#x 使用完整的高度，因此定义#x 的高度。以像素 (px) 或百分比 (%) 分别定义每个块的高度应该可以解决您的问题。

于 2013-12-18T20:00:58.490 回答
0

你想要table，不是inline-block

每当您希望某些元素占用可用空间时，您都应该考虑display: table作为最后的手段。inline-block和block元素在处理其中的内容时很有用，但就其父容器的空间而言，它们可以做的事情非常有限。自然地填充可用空间内的元素table，使它们在尝试实现某些设计目标时更容易使用。

为此，您将需要很多包装器。让我们一一介绍。

#contentwrapper

我们首先制作#contentwrapper一个表格并给它 2 个单元格来创建左右列。左栏是在哪里#a。

<div id="contentwrapper">
    <div id="a"></div>
    <div id="b"></div>
</div>

#contentwrapper {
    display: table;
}

#a {
    display: table-cell;
}

#b {
    display: table-cell;
}

#bcontentwrapper

现在我们转到右列。创建另一个名为#bcontentwrapperunder 的表#b。在这个表中，我们需要 2 行，每行包含 1 个单元格来构造#rw和#x。

我们给出#rwwrapper一个 height of0和#xwrapper一个 height of 100%so that #rw's height 将取决于它的内容并且#x总是占据表格的剩余高度。

如果您想知道，将高度设置为0不会使行折叠成水平线，因为行高必须至少是其单元格所需的高度，前提是您有一些内容在里面。并且由于行和单元格不能溢出表格，因此具有正高度的行加上具有100%高度的行实际上不能超过100%. 第二行被迫采用第一行留下的任何高度，为我们提供了我们所需要的。

<div id="bcontentwrapper">
    <div id="rwwrapper">
        <div id="rw"></div>
    </div>
    <div id="xwrapper">
        <div id="x"></div>
    </div>
</div>

#bcontentwrapper {
    display: table;
}

#rwwrapper {
    display: table-row;
    height: 0;
}

#rw {
    display: table-cell;
}

#xwrapper {
    display: table-row;
    height: 100%;
}

#x {
    display: table-cell;
}

把它们放在一起

我们把这两张桌子放在一起，看看它的样子。

<div id="contentwrapper">
    <div id="a"></div>
    <div id="b">
        <div id="bcontentwrapper">
            <div id="rwwrapper">
                <div id="rw"></div>
            </div>
            <div id="xwrapper">
                <div id="x"></div>
            </div>
        </div>
    </div>
</div>

哎呀，这看起来和我们开始的问题一模一样。我们回到第一方了吗？

别担心，还有最后一招。还记得我们要#x占用可用高度吗？自然地，你会想要给表格#bcontentwrapper一个100%高度，这样它就可以填满 的整个单元格#b，从而#x可以取走这个表格中剩下的任何东西。

但这还不够。#b将尝试调整其高度以适应其内容，而不是采用与#a. 如果 in 的内容#b比 in 的内容短#a，#b则将比 的内容短，将#a空间留在外面，将没有可用的空间可供#x消费。

为了解决这个问题，我们给出#b一个高度0。这是为了替换 的默认高度auto，这会导致它采用其内容所需的最小高度，而不是它所在行的高度（#aand的隐式行#b）。并且由于行高必须至少是其单元格所需的高度，因此0此处允许#b根据需要获取尽可能多的高度，并保持高度#a和#b同步。

#b {
    display: table-cell;
    height: 0;
}

#bcontentwrapper {
    display: table;
    height: 100%;
}

一切完成后，#x终于可以占用它一直想要的可用空间了。

演示

这是迄今为止我们讨论过的所有内容的交互式演示。制作了主要元素，contenteditable因此您可以更改内容并查看布局如何自行调整。

警告

上述解决方案仅适用于 Firefox、Chrome、Safari 和 Opera。要在 IE 上进行这项工作，叹息，您需要使用<table>.

<table id="contentwrapper">
    <tbody>
        <tr>
            <td id="a" rowspan="2"></td>
            <td id="rw"></td>
        </tr>
        <tr>
            <td id="x"></td>
        </tr>
    </tbody>
</table>

单击此处查看<table>演示。这很丑，但 IE 一直是个例外。所以不管。

于 2014-05-25T14:07:07.593 回答
0

如果您对使用 % 感兴趣，请使用以下代码，否则您将不得不使用 firebug 找到宽度和高度

   #contentwrapper {
   border: 1px solid blue;
   display: inline;
   float: left;
   height: 100%;
   position: absolute;
   width: 600px;
   }
  #a, #rw, #x {
   float: left;
   position: relative;
  }
  #a {
   border: 3px solid #ED1C24;
   display: inline-block;
   float: left;
   height: 99%;
   width: 200px;
   }
  #rw {
    border: 3px solid #FF7F27;
   display: inline-block;
   float: left;
   height: 70%;
   width: 388px;
  }
  #x {
     border: 3px solid #7092BE;
    display: block;
    float: left;
    height: 27%;
    width: 388px;
   }
于 2013-09-19T12:10:14.610 回答