Jump to content
  • 0

Ищу layout с колонками одинаковой высоты


thekap
 Share

Question

Подскажите, пожалуйста, layout, сделанный на div, с колонками одинаковой высоты и состоящий из шапки, трёх колонок и футера. При этом высота колонок должна быть сделана без использования каких бы то ни было скриптов, сам layout должен быть резиновым, а колонки идти на всю высоту экрана, даже если в них ничего не будет. Плюс layout должен быть кроссбразерным и нормально работать в IE6 и прочих проблемных браузерах. В общем, ищу что-то такое. Пока удалось найти устаревшие layot'ы, которые делались ещё для нормальной работы в IE4, но это не совсем то, что надо. Там либо есть javascript, либо приёмы вёрстки устаревшие.

Спасибо!

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Это не то. Откройте пример в FF и увидите, что колонки там становятся одинаковой высоты не сразу, а при наведении мышкой.

sigma77, по первой ссылке не делает, что надо. По второй - там нет нужных примеров. По третьей примеры есть и вроде бы то, но при удалении контента всего по центру, становится сразу не тем, чем надо :).

P. S. Мне надо так, что даже если макет полностью пустой, колонки вытягиваются на весь экран до футера.

Edited by thekap
Link to comment
Share on other sites

  • 0

<style type="text/css">

html,body{height:100%;}

</style>

<table width=100% height=100% border=1 style="border-collapse:collapse">

<tr>

<td colspan="3" height="20%"></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td colspan="3" style="height:30px;"></td>

</tr>

</table>

Вот сверстал на быструю руку, поэтому не судите строго, если есть ошибки. Смысл, думаю, ясен. Колонки, что идут между шапкой и подвалом, всегда одинаковой высоты, независимо от того, есть ли в них что-то или нет. Такой макет вообще реально сделать div'ами? Просто неохота возиться с таблицами.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy