CSS Div позиционирование в таблице - PullRequest
0 голосов
/ 03 февраля 2012

Я перепробовал все виды комбинаций, но, похоже, ничего не работает.

У меня есть таблица с тремя ячейками. Каждая ячейка содержит 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>

Ответы [ 2 ]

1 голос
/ 03 февраля 2012

Разве вы не можете просто переместить background-color в td's вместо div?

#contentBlock td {
 background-color: red; 
}
0 голосов
/ 03 февраля 2012

Я думаю, что единственный способ сделать это с помощью JavaScript.CSS не предлагает способ увеличения вертикальной высоты, кроме как с помощью свойств height / min-height.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...