Question

HTML

<div id="a">
    <table id="b">
        <tr><td></td></tr>
    </table>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

#a {
    background-color: yellow;
}

#b {
    background-color:red;
    height: 50px;
    margin-left: 50px;
    width: 100%;
}

我希望表格#b从其容器左侧（#a）的50px一直延伸到#a的右边缘。

通过将宽度设置为100%，它会离开页面，因为它会尝试匹配#a的宽度。如果省略宽度，则表格太小。

将表格设置为display:block并删除宽度似乎给出了desired behaviour。这是可靠的，还是有另一种方法可以达到同样的目的？我宁愿不采取绝对定位。

Answer 1

你可以在CSS中使用calc()函数：

#b {
  width: calc(100% - 50px);
  /* your other stuff */
}

现在大多数浏览器都支持此功能。看看caniuse.com，看看哪些浏览器没有。

Example Fiddle

Answer 2

一种方法是use box-sizing: border-box

* { -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
...
#a {
    ...
    padding-left: 50px;
}

与Sirko的答案不同，这将适用于IE8 +而不是IE9 +

另一种方法是use conflicting absolute positioning

如何让桌子占用剩余空间的100％？

2 个答案: