Меню
Что нового?

DIV vs TABLE

kpp

Новичок
DIV vs TABLE

Высота div

Если задать выстоу div в 100%, то он получается в 100% от экрана браузера. У меня див лежит в табличке с отступами по 25px сверху и снизу и высотой с окно браузера (100%).
В результате див начинается сверху как надо, с 25px сверху, но снизу он выползает "мама не горюй!". Он вылезает вниз на 25px.


Что делать??? Див неуправляем в плане высоты по сравнению с таблицей, она понимает как надо встать, когда ей говорят высота 100%, она становится на 100% от возможного... в текущем блоке. А див выходит за пределы БУДТО БЫ POSITION ABSOLUTE!

Вот такие жуткие пироги. С этим делом я мирился до тех пор, пока не потребовалось быстро загружать таблички, а они в IE сразу не отображаются. Следовательно надо div-ами.

ХОТЬ ЧТО-НИБУДЬ ПОСОВЕТУЙТЕ, <col> писать это изврат, он мне не помогает, вложенных много таблиц.

..............................................


Или если не понимаете поняли сказанного выше, то напишите такую вещь:

PHP: 
<div style="height:25px; margin:5px; background:red">
<div id="BODY_MEGA_HEIGHT" style="height:100%"> // тут "height:100%" не годится
 //ибо в результате всё вылезает за пределы окна браузера на 45px примерно. 
<div style="height:25px; margin:5px; background:red">
 

Slavicos

Новичок
и все равно не совсем понятно.
дивы не закрываются, таблицы вышеописанной нету

Код: 
<table style="height:100%;background-color:yellow"><tr><td style="padding:25px;">
<div style="height:100%;background:green;">1111111111111111111111</div>
</tr></td></table>
так чтоли надо? или так?

Код: 
<div style="height:100%;background-color:yellow;padding:25px;">
<div style="height:100%;background:green;">1111111111111111111111</div>
</div>
 

kpp

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


PHP: 
<html>
<head>
<title>test</title>
</head>
<body cellpadding=0 cellspacing=0>

<table style="height:100%;border:2px solid red;padding:10px;position:relative">
	<tr>
		<td style="position:relative">
			<div style="height:25px;border:1px solid green;position:relative">
				header div
			</div>
			<div style="height:100%;border:2px solid black;padding:10px;position:relative">
				main div
			</div>
			<div style="height:25px;border:1px solid green;position:relative">
				footer div
			</div>
		</td>
	</tr>
</table>
</body>
</html>
 
Krishna

Krishna

Продался Java
мне кажется (но я не специалист) что для кроссбраузерного решения таких проблем для начала надо переходить в строгий рендеринг
 

V-z-z-HobboT

Новичок
А зачем вообще таблицы? и позишн релэйтив?
Код: 
<div style="border:2px solid red;padding:10px;">
            <div style="height:25px;border:1px solid green;"> 
                header div 
            </div> 
            <div style="height:100%;border:2px solid black;padding:10px;"> 
                main div 
            </div> 
            <div style="height:25px;border:1px solid green;"> 
                footer div 
            </div> 
</div>
 
akxxiv

akxxiv

Новичок
>> height:25px;border:1px

Это по высоте 27px

>> height:100%;border:2px;padding:10px;

Это по высоте 100% + 4px бордеры + 20px пэддинги

>> height:25px;border:1px

Это по высоте 27px


Итого: 100% + 27 +27 +24
 

kpp

Новичок
Итого: 100% + 27 +27 +24
это ясно, как сделать ровно 100%

V-z-z-HobboT
это повторяет мою проблему. Тут также появляется полоса прокрутки. а надо ровно на 100%, чтобы потом по-человечески растягивать можно было

-~{}~ 23.04.08 12:39:

придётся с position:absolute делать
 

kode

never knows best
overflow: hidden;

и ещё совет: забей на тянущийся дизайн
 

kpp

Новичок
и ещё совет: забей на тянущийся дизайн
Нажмите для раскрытия...
Нее. Тут всё уже рабочее, только таблицами сделано. Из-за этого отображается только после полной загрузки таблицы всей. Вот так.

Вся тянучка уже готова. Это не обсуждается.


сверху строчка 25px, с менюшками
далее таблица из двух столбцов. левый с меню, правый с различными полями и формами.
снизу 25px строчка с несколькими кнопками.

......................................................

Я тут надумал, но неестественным способом:

<div style="margin:5px;position:relative">
<div style="position:absolute;padding:27 0;" id="MAIN_DIV">
<div style="height:25px">head</div>
<div style="height:25px">foot</div>
</div>
</div>
............................................................


Хреново вобщем, что никто не может заменить таблицу дивом. Стыд и срам.
 

kpp

Новичок
Ну вроде как выражение "пафасное" есть - "Вёрстка на дивах".

Придётся сделать это наименьшим числом таблиц, чтобы тегом <col > можно было всю структуру будующей (которая будет загружена) таблицы описать.

Есть аргументы в сторону <col > ?
Вся муть из-за IE.
 
Войдите или зарегистрируйтесь для ответа.
Сверху