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

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从50像素从它的容器（#a）一路的右边缘的左边跨越#a。

通过将宽度设置为100%它会关闭页面，因为它会尝试匹配#a的宽度。如果我忽略宽度，那么表格太小。

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

来源

2013-05-21 mpen

[这篇文章]（http://stackoverflow.com/questions/5219175/width-100-padding/5219611#5219611）表明'display：block'是可靠的cro ss浏览器。你也可以看看'box-sizing'属性。我也非常喜欢这种负利润率方法。 http://stackoverflow.com/a/11238699/661447 – jammykam

你也许也会发现这个有趣的http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width – Evgeny

一种方法做的是就是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

来源

2013-05-21 22:38:43 Evgeny

有趣。为什么边框会改变宽度？我知道它改变了盒子模型，所以宽度的计算方式不同，但是..如果以前做过，我预计还会崩溃。 – mpen

@Mark这里的主要变化不是'border-box'，而是将'padding-left'应用于'＃a'而不是'margin-left'到'＃b'！ – Sirko

@Sirko：哦！我没有注意到你已经移动了它。这现在非常合理。 – mpen

可以使用calc()功能CSS这样的：

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

大多数浏览器都支持这个时下。看看caniuse.com看哪些浏览器没有。

Example Fiddle

来源

2013-05-21 22:12:43 Sirko

不错！从来不知道'calc（）'。 – mpen

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

回答

相关问题