td內的底部div，零餘量

<!DOCTYPE html> 
<html> 
<head> 
    <title>MyTitle</title> 
    <style type="text/css"> 
     body 
     { 
      background-image:url('images/my.png'); 
      /*width:100%;*/ 
      height:100%; 
      background-repeat:no-repeat; 
      background-size:100%; 
      /*background-position:0,0,0,0px; 
      background-position:center;*/ 
      margin: 0; 
      padding: 0; 
     } 
     html 
     { 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <table cellpadding="0" cellspacing="0" 
     style="height:100%; width: 100%; border-collapse: collapse; background-color: Red; border-color:Yellow;"> 
     <tr style="background-color: Green;"> 
      <td style="background-color: Blue; text-align: center; vertical-align: bottom; padding-bottom:0px;"> 
       <div style="margin: 0px 0px 0px 0px; background-color:Silver;"> 
        <button type="submit">Some text</button> 
        <p style="">Another text</p> 
       </div> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

FF4。窗口是藍色的，這意味着td會填滿整個窗口。該div具有零邊距，td具有零填充。儘管如此，窗口的div和下邊緣之間還有一個藍色的矩形。如何避免它？保證金底部：-16px;不是一種選擇。td內的底部div，零餘量

謝謝。

來源

2011-06-11 noober

如何發佈一個URL，所以我們可以看到問題。謝謝！ – 2011-06-11 20:19:01

歡迎您訪問：http://sybicit.com/index2.htm感謝您對我的問題感興趣。 – noober 2011-06-11 20:22:29

問題出在p元素 - 特別是它的margin-bottom。

摺疊利潤率出現這種情況的原因是：

您可以在div這是p的父與overflow: hidden修復它在這種情況下。

您的代碼：http://jsbin.com/enote5

您與修復代碼：http://jsbin.com/enote5/2

（或者你可以只在p刪除margin，如果你喜歡）

來源

2011-06-11 20:19:33 thirtydot

謝謝，它的工作原理！ – noober 2011-06-11 20:30:07

td內的底部div，零餘量

回答

相關問題