Question

我尝试了各种各样的组合，但似乎没有任何效果。

我有一张有三个牢房的桌子。每个单元格包含一个具有设定宽度的div。左侧块往往垂直运行很长，但现在我需要中心和右侧div块也可以拉伸到桌子的长度。（不幸的是我无法删除表，因为它被设置为我正在使用的系统代码。）

我简单地重新制作了布局。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>layout test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#contentBlock {
    height: 100%;
    overflow: auto;
}
#contentBlock .leftBlock {
    background-color: red;
    width: 200px;
}
#contentBlock .rightBlock {
        background-color: red;
    width: 200px;
}
#contentBlock .centerBlock {
    background-color: red;
    width: 580px;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td colspan="2" style="background-color: #e2e2e2;">
    <div id="contentBlock">
        <table width="980" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="200" valign="top"><div class="leftBlock">
              <p>left block</p>
              <p>sdf</p>
              <p>sdf</p>
              <p>sdf</p>
              <p>sdf</p>
              <p>sdf</p>
            </div></td>
            <td width="580" valign="top"><div class="centerBlock">
              <p>centerBlock</p>
              <p>dfg</p>
            </div></td>
            <td width="200" valign="top"><div class="rightBlock">
              <p>rightBl</p>
              <p>ock</p>
            </div></td>
          </tr>
        </table>
    </div></td>
  </tr>

</table>
</body>
</html>

Answer 1

你能不能将background-color移到td's而不是div？

#contentBlock td {
 background-color: red; 
}

Answer 2

我认为你能做到这一点的唯一方法就是使用javascript。除了使用height / min-height属性之外，CSS不提供扩展垂直高度的方法。

CSS Div定位在表中

2 个答案: