Как я могу преобразовать этот макет таблицы на CSS? - PullRequest
Новая
       17

Как я могу преобразовать этот макет таблицы на CSS?

2 голосов
/ 31 июля 2009

У меня есть макет на основе таблицы, который имеет высоту / ширину 100% без полос прокрутки. Заголовок (красный) автоматически расширяется, чтобы соответствовать содержанию, и я не знаю, сколько пикселей это будет. Таблица жидкости ниже дает именно то, что я. 

<html>
<body height=100%>
<table height=100% width=100% padding=0>
<tr height=1><td colspan=2 bgcolor=red>Fit<br/>to<br/>content<br/>height</td></tr>
<tr><td bgcolor=blue width=66% valign=top>How can I do this with CSS?</td><td bgcolor=green valign=top>
<div style="height:100%; width:100%; overflow:auto;">
This area can have content that overflows - needs an independent scrollbar.<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
</div>
</td></tr>
</table>
</body>
</html>

Как сделать такой же макет в CSS и заставить его работать в часто используемых браузерах?

Ответы [ 2 ]

2 голосов
/ 31 июля 2009

Заголовок не должен быть слишком сложным, для двух столбцов, я думаю, вам нужно использовать искусственные столбцы , чтобы цвета растянулись до самого низа.

Для заголовка, я думаю, вы просто хотите:

HTML: 

<div id="header">Fit<br/>to<br/>content<br/>height</div>

CSS: 

#header {
    background-color: red;
    width: 100%;
}

p.s. Ты только что заставил мои глаза кровоточить;)

0 голосов
/ 31 июля 2009 
<html>
<head>
<style type="text/css">
#wrapper
{
 height: 100%;
 width: 100%;
 padding: 0;
}

#header
{
 float: left;
 width: 100%;
 background-color: red;
}

#main
{
 height: 100%;
 width: 100%;
 float: left;
}

#main-left
{
    height: 100%;
 float: left;
 width: 66%;
 background-color: blue;
}
#main-right
{
    height: 100%;
 float: left;
 width: 34%;
 background-color: green;
}
</style>
</head>
<body>

<div id="wrapper">

 <div id="header">
  Fit<br />to<br />content<br />height
 </div> 

<div id="main">

  <div id="main-left">
    How can I do this with CSS?
   </div>

   <div id="main-right">
    Tested in Chrome 2 and IE8
   </div>

 </div>

</div>
</body>
</html>
...