div left height 100%

sweet15w ↓

13 Сентябрь, 2011, 09:14:31

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 104
Сила слова: -0.96

css:

CSS

* { margin: 0; padding: 0; }
html { height: 100%; }
body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; height: 100%; }
#wrapper { width: 100%; min-width: 1000px; min-height: 100%; height: auto !important; height: 100%; background: pink; }
#header { height: 150px; background: yellow; }
#middle { width: 100%; padding: 0 0 100px; height: 1%; position: relative; }
#middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; }
#container { width: 100%; float: left; overflow: hidden; }
#content { padding: 0 270px 0 270px; }
#sideLeft { float: left; width: 250px; margin-left: -100%; position: relative; background: red; }
#sideRight { float: left; margin-right: -3px; width: 250px; margin-left: -250px; position: relative; background: green; }
#footer { margin: -100px auto 0; min-width: 1000px; height: 100px; background: blue; position: relative; }

html:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="middle">
<div id="container">
<div id="content">content</div>
</div>
<div class="sidebar" id="sideLeft">left</div>
<div class="sidebar" id="sideRight">right</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>

1. а как левый и правый дивы растянуть на всю высоту и возможно ли это вообще?
2. а как внутри дивов затем элементы растягивать на всю высоту и возможно ли это вообще?


	Записан

отвечаю не в тему... за то редко...

Stasovsky ↓

13 Сентябрь, 2011, 10:48:17 , спустя 1 час 33 минуты 46 секунд

НЕ ХУЕТА! ХУЕТА!

Сенсей XD
Группа: Джедаи

Карма: 54
Сообщений: 3653
Сила слова: 1.48

1. нет
2. нет


	Записан

AlexB ↓

13 Сентябрь, 2011, 11:05:12 , спустя 16 минут 55 секунд

НЕ ХУЕТА! ХУЕТА!

Группа: в ухо

Карма: 89
Сообщений: 3427
Сила слова: 2.6

Stasovsky

1. нет
2. нет

Таблицы рулят ))))))))))))


	Записан

Тебе помогли? Поддержи пыху материально!

artoodetoo ↓

13 Сентябрь, 2011, 11:24:46 , спустя 19 минут 34 секунды

НЕ ХУЕТА! ХУЕТА!

с особым цинизмом
Группа: в ухо

Карма: 124
Сообщений: 3805
Сила слова: 3.26

Таблицы рулят, это факт. Никаких танцев с бубном.

Но про одинакововысокие колонки тоже есть миллион примеров. Конкретное решение зависит от задачи.
http://www.alistapart.com/articles/multicolumnlayouts/
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://www.satzansatz.de/cssd/columnswapping.html


	Записан

sweet15w ↓

13 Сентябрь, 2011, 12:06:47 , спустя 42 минуты 1 секунду

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 104
Сила слова: -0.96

суть то не в одинаковости колонок левой и правой.... а в том, чтобы на всю высоту сделать их :(


	Записан

отвечаю не в тему... за то редко...

Stasovsky ↓

13 Сентябрь, 2011, 12:11:15 , спустя 4 минуты 28 секунд

НЕ ХУЕТА! ХУЕТА!

Сенсей XD
Группа: Джедаи

Карма: 54
Сообщений: 3653
Сила слова: 1.48

CSS

position:absolute;
top:0;
bottom:0;

Спустя 14 секунд добавил

с последствиями


	Записан

artoodetoo ↓

13 Сентябрь, 2011, 03:09:00 , спустя 2 часа 57 минут 45 секунд

НЕ ХУЕТА! ХУЕТА!

с особым цинизмом
Группа: в ухо

Карма: 124
Сообщений: 3805
Сила слова: 3.26

sweet15w

суть то не в одинаковости колонок левой и правой.... а в том, чтобы на всю высоту сделать их :(

другими словами — чтобы были одинаковой высоты )))

или таки что?


	Записан

sweet15w ↓

30 Сентябрь, 2011, 09:10:30 , спустя 16 дней 18 часов 1 минуту 30 секунд

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 104
Сила слова: -0.96

дк суть то в чем... чтобы так сказать... видеть сайт - на всю страницу... даже если мало контента... а там уж как диз выглядит...


	Записан

отвечаю не в тему... за то редко...

Givi ↓

30 Сентябрь, 2011, 10:10:01 , спустя 59 минут 31 секунду

НЕ ХУЕТА! ХУЕТА!

Группа: Адекваты

Карма: 42
Сообщений: 2305
Сила слова: 1.82

sweet15w, реально сделать. Но сама реализация зависит от задачи:
1. Можно сделать все только визуально на всю высоту страницы, а в реале колонка будет только на высоту блока, границы которого не видно. По сути делается это градиентной заливкой в основном блоке обертке, высота которого имеет уже реальную 100% высоту страницы.
2. Можно потанцевать с бубном. Но тут нужно учесть что конечный результат в большинстве случаем будет не масштабируемым, то есть если мы сверстали какую-то структуру документа, то при существенном изменении её основ придется заново танцевать с бубном.
3. Не ипать моск и заюзать таблицы. Страшного в этом ничего нет. Хотя, я бы старался до последнего так не делать, но это потому что я это я, то есть по большей мере дело принципа.

По сути 1 вариант часто применим и многих устраивает.


	Записан

Все, что говорят другие - неправда! До тех пор, пока ты сам в это не поверишь.
Если человек дурак, то... чур это не я!

Stasovsky ↓

30 Сентябрь, 2011, 11:11:11 , спустя 1 час 1 минуту 10 секунд

НЕ ХУЕТА! ХУЕТА!

Сенсей XD
Группа: Джедаи

Карма: 54
Сообщений: 3653
Сила слова: 1.48

а не проще показать пальцем где/что/куда/зачем/почему, а там мы уж точно все поймем и подскажем


	Записан

artoodetoo ↓

01 Октябрь, 2011, 11:54:28 , спустя 1 день 43 минуты 17 секунд

НЕ ХУЕТА! ХУЕТА!

с особым цинизмом
Группа: в ухо

Карма: 124
Сообщений: 3805
Сила слова: 3.26

sweet15w, еще раз - с таблицами все просто.
но если ты такой упертый, можно и так. делай шаг за шагом. сначала добейся чтобы страница была "во всю высоту". вот прекрасный пример http://ryanfait.com/sticky-footer/
а потом уже имитируй свою бесконечную левую колонку с помощью бекграунда или воспользуйся моими ссылками выше.


	Записан

kimi2k ↓

10 Октябрь, 2011, 11:12:38 , спустя 9 дней 11 часов 18 минут 10 секунд

НЕ ХУЕТА! ХУЕТА!

Карма: 0
Сообщений: 1
Сила слова: 0

к слову... иногда проще воспользоваться таблицей, чем div с огромным количеством хаков (с)

Кто сказал что уместное использование таблиц является дурным тоном?
В добавок не забываем, что нагромождения дивов с сопутствующими классами увеличивают объем документа, что не есть гуд


	Записан

Sinkler ↓

10 Октябрь, 2011, 11:19:02 , спустя 6 минут 24 секунды

НЕ ХУЕТА! ХУЕТА!

Похуй, пляшем!
Группа: Джедаи

Карма: 73
Сообщений: 6806
Сила слова: 1.07

у меня ощущение, что кафе регает по юзверю в час и смотрит, какой из них будет популярнее

Спустя 1 минуту 53 секунды добавил

ну реально дохуя ньююзверей


	Записан

Пыхослет 5 | /home/sinkler/

Tekuto ↓

10 Октябрь, 2011, 11:20:28 , спустя 1 минуту 26 секунд

НЕ ХУЕТА! ХУЕТА!

Группа: Адекваты

Карма: 0
Сообщений: 1229
Сила слова: 0

Sinkler
у меня ощущение, что кафе регает по юзверю в час и смотрит, какой из них будет популярнее

у меня такое ощущение, что вы в любом юзвере теперь ищите Кафешку
А говорили, что вам похуй на его уход.

Скучаете по нему, бабки XDDD


	Записан

Just a man and his will to survive

phpdude ↓

10 Октябрь, 2011, 11:21:55 , спустя 1 минуту 27 секунд

НЕ ХУЕТА! ХУЕТА!

я - ЭМО
Группа: в ухо

Карма: 345
Сообщений: 20790
Сила слова: 1.66

Tekuto, он твой акк взломал?


	Записан

забанен. могу забанить других, пишите в личку

BEER. Helping ugly people have sex since 1862.

Страниц: [1] 2

Печать

« предыдущая тема следующая тема »

	Автор	Тема: div left height 100% (Прочитано 383 раз)
0 Пользователей и 1 Гость смотрят эту тему.