Растяжение div'a

@Hagrael · Регистрация: 07.01.2010

Студворк — интернет-сервис помощи студентам

У меня такая задача: фиксировать высоту div'a, но сделать его устойчивым к растяжению.
display: table-cell IE6,IE7 не поддерживает, можно задать min-height, но это не задаст явной высоты, и по этому div'ы, находящиеся внутри при height: 100% у них не растянутся на всю высоту. Что делать?

Vovan-VE · 18.09.2010, 12:06

Сообщение от Hagrael

фиксировать высоту div'a, но сделать его устойчивым к растяжению

Так фиксировать или чтобы растягиваться умел? Противоречие.

@Hagrael · 18.09.2010, 12:15 **[ТС]**

Vovan-VE, да, фиксировать, но чтобы он растягивался при пополнении. min-height не подходит, т. к. оно не задаёт высоту конкретно, и если в доч. элементе указать height: 100%, то элемент не выровняется по родителю с min-height. А мне именно это и надо. Как такое реализовать?

Vovan-VE · 18.09.2010, 12:29

Понял. Имхо, такое только таблицами можно сделать, либо через изврат.

@Hagrael · 18.09.2010, 12:33 **[ТС]**

Vovan-VE, знач о таблицах как о страшном сне забывать не стоит, как говорят многие, да? Из них всё же можно лепить каркас сайта? А вот изврат, который я нашёл:

CSS
1
float: left; background: #ccc; width: 200px; margin-bottom: -20000px; padding-bottom: 20000px;

Только я не понимаю, как может быть margin отрицательным =) Можете объяснить?

Vovan-VE · 18.09.2010, 12:44

margin с плюсом делает отступ от элемента, чем больше, тем дальше. Отрицательный margin "двигает" "границу" в другую сторону, под элемент.

@Hagrael · 18.09.2010, 12:47 **[ТС]**

Vovan-VE, что-то я не понял. Это ж тоже самое, что и padding получается! Правильно я всё говорю?

Vovan-VE · 18.09.2010, 13:00

Нет. margin:100px говорит "отодвиньтесь от меня на 100px", а margin:-100px говорит "подвиньтесь на/под меня на 100px".

@Hagrael · 18.09.2010, 14:11 **[ТС]**

Vovan-VE, мда... ну и жесть... А если главный каркас сайта будет использовать таблицу, то это ничего, как считаешь?
В принципе можно у обоих колонок поставить min-height, но тоже не лучший вариант. Поэтому придётся чувствую делать колонки не без извращений.

Добавлено через 1 час 3 минуты
Но ещё вопрос: как сделать обтекание без переноса, даже если это требуется?

Добавлено через 2 минуты
И ещё один =) Мне сказали, что float в блочной вёрстке использовать неразумно, и что надо использовать позиционирование. Но как сделать центральную часть резиновой при использовании позиционирования?
Не могли бы вы мне показать пример качественной страницы подогнанной под разрешения, написаной блочной вёрсткой?

@lesha_firs · 18.09.2010, 14:37

Сообщение от Hagrael

И ещё один =) Мне сказали, что float в блочной вёрстке использовать неразумно, и что надо использовать позиционирование. Но как сделать центральную часть резиновой при использовании позиционирования?
Не могли бы вы мне показать пример качественной страницы подогнанной под разрешения, написаной блочной вёрсткой?

Почему это float использовать неразумно!
Все пользуються у всех разумно а у вас нет=)
вот пример с абсольтным позиционированием

HTML5
1
2
3
4
<div id="left">
</div>
<div id="center">
</div>

CSS
1
2
#left{position:absolyte;top0;left:0;width:200px;}
#center{position:absolyte;top0;left:200px;width:auto;}

а вот тоже самое только с float

CSS
1
2
#left{float:left;width:200px;}
#center{width:auto;}

Добавлено через 2 минуты
А чуть не забыл div тянеться по высоте если в стилях прописать позицию fixed
Но есть касяк в ie6 не поддерживаеться! можно делать для ie6 спомощью js что не очень хорошо либо забить и делать таблицей

@Hagrael · 18.09.2010, 16:25 **[ТС]**

lesha_firs, fixed можно заменить на expression, вот статья по этому поводу:
http://web-utils.net/css-hack/... -scrolling
По поводу резины - здесь 1 колонка и контент, а если надо чтобы и справа была колонка?

@lesha_firs · 18.09.2010, 16:29

HTML5
1
2
3
4
5
6
<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>

CSS
1
2
3
#left{position:absolyte;top0;left:0;width:200px;}
#center{position:absolyte;top0;left:200px;right:200px;width:auto;}
#right{position:absolyte;top0;right:0;width:200px;}

expression
это тот же js
если js отключен он не будет работать!

Vovan-VE · 18.09.2010, 16:32

Сообщение от lesha_firs

absolyte

absolute

Добавлено через 1 минуту

Не по теме:

Сообщение от lesha_firs

expression
это тот же js
если js отключен он не будет работать!

Если юзер все еще пользуется пользуется IE6 и сам отключил скрипты - то это маньяк настоящий.

@lesha_firs · 18.09.2010, 16:37

пользуються 70% насиления!

Добавлено через 3 минуты

Не по теме:

а да и почти все организации%-) да и самому приятно когда сайт работает в ie6 при любом дизайне!

Vovan-VE · 18.09.2010, 16:37

Не по теме:

Сообщение от lesha_firs

пользуються 70% насиления!

У Вас данные некорректные. http://www.liveinternet.ru/stat/ru/browsers.html

@lesha_firs · 18.09.2010, 16:40

Не по теме:

а ну да!
тота меня на работе гоняют чтоб 6 все было также как и мазиле=)

@Hagrael · 18.09.2010, 16:46 **[ТС]**

lesha_firs, а ведь если будет абсолютное позиционирование, то элемент вроде не будет мериться с остальными (как я понимаю). Или я ошибаюсь?

@lesha_firs · 18.09.2010, 16:50

нет не будут

@Hagrael · 18.09.2010, 17:06 **[ТС]**

lesha_firs, так div растянется на всё оставшееся место или как? Мне это нужно.

@lesha_firs · 18.09.2010, 17:08

на все место widht:100%
под контент widht:auto

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932

	Растяжение div'a 18.09.2010, 11:56. Показов 4993. Ответов 20 Метки нет (Все метки) У меня такая задача: фиксировать высоту div'a, но сделать его устойчивым к растяжению. display: table-cell IE6,IE7 не поддерживает, можно задать min-height, но это не задаст явной высоты, и по этому div'ы, находящиеся внутри при height: 100% у них не растянутся на всю высоту. Что делать? 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.09.2010, 12:15 [ТС]
	Vovan-VE, да, фиксировать, но чтобы он растягивался при пополнении. min-height не подходит, т. к. оно не задаёт высоту конкретно, и если в доч. элементе указать height: 100%, то элемент не выровняется по родителю с min-height. А мне именно это и надо. Как такое реализовать? 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	18.09.2010, 12:29
	Понял. Имхо, такое только таблицами можно сделать, либо через изврат. 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	18.09.2010, 12:44
	margin с плюсом делает отступ от элемента, чем больше, тем дальше. Отрицательный margin "двигает" "границу" в другую сторону, под элемент. 1

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.09.2010, 12:47 [ТС]
	Vovan-VE, что-то я не понял. Это ж тоже самое, что и padding получается! Правильно я всё говорю? 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	18.09.2010, 13:00
	Нет. margin:100px говорит "отодвиньтесь от меня на 100px", а margin:-100px говорит "подвиньтесь на/под меня на 100px". 1

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.09.2010, 14:11 [ТС]
	Vovan-VE, мда... ну и жесть... А если главный каркас сайта будет использовать таблицу, то это ничего, как считаешь? В принципе можно у обоих колонок поставить min-height, но тоже не лучший вариант. Поэтому придётся чувствую делать колонки не без извращений. Добавлено через 1 час 3 минуты Но ещё вопрос: как сделать обтекание без переноса, даже если это требуется? Добавлено через 2 минуты И ещё один =) Мне сказали, что float в блочной вёрстке использовать неразумно, и что надо использовать позиционирование. Но как сделать центральную часть резиновой при использовании позиционирования? Не могли бы вы мне показать пример качественной страницы подогнанной под разрешения, написаной блочной вёрсткой? 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.09.2010, 16:25 [ТС]
	lesha_firs, fixed можно заменить на expression, вот статья по этому поводу: http://web-utils.net/css-hack/... -scrolling По поводу резины - здесь 1 колонка и контент, а если надо чтобы и справа была колонка? 0

@lesha_firs 143 / 109 / 13 Регистрация: 13.02.2010 Сообщений: 522
	18.09.2010, 16:37
	пользуються 70% насиления! Добавлено через 3 минуты Не по теме: а да и почти все организации%-) да и самому приятно когда сайт работает в ie6 при любом дизайне! 0

@lesha_firs
	18.09.2010, 16:40
	Не по теме: а ну да! тота меня на работе гоняют чтоб 6 все было также как и мазиле=) 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.09.2010, 16:46 [ТС]
	lesha_firs, а ведь если будет абсолютное позиционирование, то элемент вроде не будет мериться с остальными (как я понимаю). Или я ошибаюсь? 0

@lesha_firs 143 / 109 / 13 Регистрация: 13.02.2010 Сообщений: 522
	18.09.2010, 16:50
	нет не будут 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.09.2010, 17:06 [ТС]
	lesha_firs, так div растянется на всё оставшееся место или как? Мне это нужно. 0

@lesha_firs 143 / 109 / 13 Регистрация: 13.02.2010 Сообщений: 522
	18.09.2010, 17:08
	на все место widht:100% под контент widht:auto 1