如何占用所有可用空间

Question

我希望#x占用所有可用空间。我该怎么做呢？

（P.S。抱歉mspaint）

Answer 1

试试这个

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%;
    }

Answer 2

我在jsfiddle为您创建了一个示例 使用方法：

position: absolute;
height: 100%;

Answer 3

如果您对使用％感兴趣，请使用以下代码，否则您必须使用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;
   }

Answer 4

根据你的图像，你需要#x使用完整的高度，所以定义#x的高度。单独定义每个块的高度（以像素为单位）（px）或百分比（％）可以解决您的问题。

Answer 5

您想要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

现在我们转到右栏。在#bcontentwrapper下创建另一个名为#b的表格。在此表中，我们需要2行，每行包含1个单元格，以构建#rw和#x。

我们将#rwwrapper的高度0和#xwrapper的高度设为100%，以便#rw的高度取决于其内容并且#x将始终占据表格的剩余高度。

如果您想知道，将高度设置为0将不会使行折叠为水平线，因为行高必须为at least the height required by its cells，前提是您内部有一些内容。并且因为行和单元格不能溢出表格，所以具有正高度的行加上具有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相同的高度。如果#b中的内容短于#a中的内容，则#b将短于#a，将空格留在外面，{{1}将没有可用空间消费。

要解决此问题，我们会为#x提供#b的高度。这是为了替换0的默认高度，这会导致它获取其内容所需的最小高度，而不是它所在行的高度（auto的隐含行和{{1} }}）。由于行高必须至少是其单元格所需的高度，因此#a允许#b获取所需的高度，并保持0和{的高度{1}}同步。

#b

完成所有工作后，#a最终可以占用它一直想要的可用空间。

演示

到目前为止我们讨论的所有事情中的Here is an interactive demo。主要元素为#b，因此您可以更改内容并查看布局如何自行调整。

买者

以上解决方案仅适用于Firefox，Chrome，Safari和Opera。为了使这个工作在IE上，感叹，你需要使用#b { display: table-cell; height: 0; } #bcontentwrapper { display: table; height: 100%; } 。

#x

Click here for the <table> demo。这很难看，但IE一直都是例外。无论如何。