Резиновая таблица в IE 7 - как?

pimandr · December 19, 2008

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

Нужно сделать таблицу (именно table а не div) из двух колонок, одна фиксированной высоты, вторая - на всю оставшуюся часть высоту экрана.

Сделал - в опере и ФФ работает, в IE 7 появляется вертикальный сролл. У самого 6 эксплоера нет, но вроде бы там тоже все ок. В чем проблема?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{title} -</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
 }
 -->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" height="100%" width="100%">
	<tr>
		<td height="100px" BGCOLOR="#CCCCCC">
			шапка
		</td>
	</tr>
	<tr>
		<td height="100%" BGCOLOR="#999999">
			центр
		</td>
	</tr>	
</table>	
</body> 
</html>

Вобщем-то я понимаю, что IE считает 100% не от оставшегося пространства, а от всей высоты экрана, но ведь можно это как-то решить?

webmaster · December 27, 2008

 <td height="100px" BGCOLOR="#CCCCCC">

.....

 <td height="100%" BGCOLOR="#999999">

Чет такую таблицу не могу представить визуально...

Верхняя ячейка 100 пикс.., нижняя 100% круть))

может и в этом трабла!

Yulia · December 28, 2008

попробуйте просто убрать высоту 100% у нижней ячейки. Если html, и body, и таблица имеют высоту 100%, то нижняя ячейка сама растянется как надо. Должна по крайней мере.

pimandr · December 29, 2008

Чет такую таблицу не могу представить визуально...

А чего представлять-то, я ведь вроде бы даже ссылку дал, где все это нарисовано. Повторюсь: 4tob.ru//test.html

Верхняя ячейка 100 пикс.., нижняя 100% круть))
может и в этом трабла!

не "может быть", а факт - проблема именно в этом но это единственное решение, которое я смог придумать. Повторюсь:

Нужно сделать таблицуиз двух колонок, одна фиксированной высоты, вторая - на всю оставшуюся часть высоты экрана.

Посоветуйте, пожалуйста другое решение, но при чтоб при этом не появлялся скрол и решение оставалось гибким, независимо от разрешения монитора

попробуйте просто убрать высоту 100% у нижней ячейки. Если html, и body, и таблица имеют высоту 100%, то нижняя ячейка сама растянется как надо. Должна по крайней мере.

угу, должна. и даже растягивается в опере. А вот в ИЕ получается вообще что-то сказочно тупое.

Searcher · December 29, 2008

При таком доктайпе высота таблицы в 100% - плохое решение. Все решается блоками, а в них, если уж очень надо, можно вставить таблицы. Вот пример с фиксированными заголовком и подвалом и резиновой серединой во всю высоту.

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">

html, body {
    height: 100%;
    margin: 0;
    background: blue;
}
#header {
    height: 100px;
    background: red;}

#content {
    margin-bottom: -100px;
    min-height: 100%;}

* html #content {
    height: 100%;}

#space {
    height: 100px;}

#footer {
    height: 100px;
    background: green;}

</style>
</head>
<body>
    <div id="content">
        <div id="header">
            123
        </div>
        456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789 456789
        <div id="space"></div>
    </div>
    <div id="footer">
        789
    </div>
</body>
</html>

Yulia · December 29, 2008

а если в стрикте попробовать? Сменить доктайп всяко легче, чем всю верстку.

Searcher · December 29, 2008

в стрикте тем более забудте про высоту таблицы в 100%

и почему обязательно это надо делать таблицей, а не div'ом?

Yulia · December 29, 2008

мда, давненько я таблицами не верстала. Действительно, автор, верстайте уже по-взрослому

Sign In

Резиновая таблица в IE 7 - как?

Question

pimandr

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

webmaster

Link to comment

Share on other sites

Yulia

Link to comment

Share on other sites

pimandr

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Yulia

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Yulia

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information