如何讓桌子佔用剩餘空間的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％？

回答

相關問題