ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Расягивать DIV по высоте родительского
19 сообщений из 19, страница 1 из 1
Расягивать DIV по высоте родительского
    #37996879
SQL-Talker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQL-Talker
Участник
Привет!
Подскажите, кто знает - есть родительский див и в нем вложен другой див выравненный по левому краю (типа меню, инфо и т.п.)
Как сделать так чтобы внутренний див растягивался по высоте родительского?
Т.е. в родительском может содержаться куча всякой всячины и по высоте может растягиваться на несколько страниц, хотелось бы чтобы, внутренний див тоже растягивался, т.к. он выделен цветом, то смотрится некрасиво, когда он обрубается, а родительский див еще на пару страниц вниз тянется.
Как такое сделать?
...
Рейтинг: 0 / 0
13.10.2012, 13:23:48
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37996949
дадуда___
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
дадуда___
Гость
SQL-Talker,

в колхозном CSS этого сделать нельзя. используй яваскрипт
...
Рейтинг: 0 / 0
13.10.2012, 15:22:00
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37996974
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Ну отчего же? Условий у нас немного, поэтому сразу вижу вариант дива с абсолютным позиционированием, у которого не задана высота, но есть привязка к верзнему, нижнему и левому кряю:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
.parent {
    padding-left:40px;
    position:relative;
}
.child {
    bottom:0;
    left:0;
    position:absolute;
    top:0;
    width:40px;
}


Второй вариант - поиграться с внутренними контейнерами с display:inline-block, и задать левому высоту, равную 100%.
Третий вариант - задать для родительского контейнера overflow:hidden, а внутренний сделать с огромной высотой (скажем, 10000px).

Без привязки к конкретному коду сложно что-то посоветовать.
...
Рейтинг: 0 / 0
13.10.2012, 15:50:52
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37996989
дадуда___
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
дадуда___
Гость
IDVsbruckНу отчего же? Условий у нас немного, поэтому сразу вижу вариант дива с абсолютным позиционированием, у которого не задана высота, но есть привязка к верзнему, нижнему и левому кряю:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
.parent {
    padding-left:40px;
    position:relative;
}
.child {
    bottom:0;
    left:0;
    position:absolute;
    top:0;
    width:40px;
}


Второй вариант - поиграться с внутренними контейнерами с display:inline-block, и задать левому высоту, равную 100%.
Третий вариант - задать для родительского контейнера overflow:hidden, а внутренний сделать с огромной высотой (скажем, 10000px).

Без привязки к конкретному коду сложно что-то посоветовать.

Какие-то костыли колхозного CSS. Народ юзает JavaScript.
...
Рейтинг: 0 / 0
13.10.2012, 16:09:18
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997000
SQL-Talker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQL-Talker
Участник
IDVsbruck,
Просто отлично, помогло )))

дадуда___,
Там где можно обойтись без js я обхожусь без него и не вижу причин поступать наоборот. Может вы знаете такие причины?
...
Рейтинг: 0 / 0
13.10.2012, 16:33:14
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997014
Фотография Ифреймов Вася
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ифреймов Вася
Участник
IDVsbruckНу отчего же? Условий у нас немного, поэтому сразу вижу вариант дива с абсолютным позиционированием, у которого не задана высота, но есть привязка к верзнему, нижнему и левому кряю
может я чего не понял
почему нельзя просто height:100% указать вложеному диву?
...
Рейтинг: 0 / 0
13.10.2012, 16:46:50
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997049
Seegile
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Seegile
Участник
Работает. :)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
	</head>

	<body>
		<div style="width: 300px; height: 500px; border: 1px solid blue;">
			<div style="width: 100px; height: 100%; border: 1px solid red;"></div>
		</div>
	</body>
</html>
...
Рейтинг: 0 / 0
13.10.2012, 17:44:44
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997353
SQL-Talker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQL-Talker
Участник
Я посмотрел, работают оба варианта, но в варианте где height:100% внутренняя панель немного вылезает за нижний край внешней панели.
В общем оставил первый вариант.
...
Рейтинг: 0 / 0
14.10.2012, 00:35:11
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997368
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Если указывать box-sizing:border-box, то не будет вылазить.
...
Рейтинг: 0 / 0
14.10.2012, 01:27:45
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997404
Seegile
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Seegile
Участник
SQL-Talkerвнутренняя панель немного вылезает за нижний край внешней панели.
т.е. бордёр накладывается на другой?
Это скорее дурной глюк. Почему глюк? Потому что верхний бордюр не накладывается, а только нижний.
...
Рейтинг: 0 / 0
14.10.2012, 06:11:15
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997405
Seegile
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Seegile
Участник
Еще как вариант можно главному div прописать padding-bottom: 1px;.
А box-sizing только в css3.
...
Рейтинг: 0 / 0
14.10.2012, 06:14:18
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997406
Seegile
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Seegile
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style>
			html, body {height: 100%; margin: 0;}
		</style>
	</head>

	<body>
		<div style="width: 300px; height: 100%; background: red; border: 20px solid yellow;">
			<div style="width: 100px; height: 100%; background: blue; border: 20px solid pink;"></div>
		</div>
	</body>
</html>



Вот такая вот ерунда..
...
Рейтинг: 0 / 0
14.10.2012, 06:30:26
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997560
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
SeegileА box-sizing только в css3.
Это понятно. Но разве у нас были ограничения?
...
Рейтинг: 0 / 0
14.10.2012, 15:23:56
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997727
Seegile
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Seegile
Участник
Почему этот код даёт такой же эффект как на картинке выше?
Почему игнор padding и border?
Проверяю в опере 12.02 т.е. последней.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style>
			html, body {height: 100%; margin: 0;}
		</style>
	</head>

	<body>
		<div style="width: 300px; height: 100%; background: yellow; padding: 20px;">
			<div style="width: 100%; height: 100%; background: red;">
				<div style="width: 100px; height: 100%; background: pink; padding: 20px;">
					<div style="width: 100%; height: 100%; background: blue;"></div>
				</div>
			</div>
		</div>
	</body>
</html>
...
Рейтинг: 0 / 0
14.10.2012, 19:53:41
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37997974
SQL-Talker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQL-Talker
Участник
SeegileПочему этот код даёт такой же эффект как на картинке выше?
Почему игнор padding и border?
Проверяю в опере 12.02 т.е. последней.

Такой же результат и в ИЕ и в Хроме и в Мозилле - внутренний див вылезает за края родительского.
А в варианте как в 13313394 за края ничего не вылезает, правда паддинги игнорируются, но зато работает border.
Вот, можно сравнить:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title></title>
      <style>
         html, body {height: 100%; margin: 0;}
      </style>
   </head>

   <body>
      <div style="width: 300px; height: 300px; background: yellow; padding: 20px;">
      <div style="width: 100%;  height: 100%; background: red;">
      <div style="width: 100px; height: 100%; background: pink;   padding: 20px;">
      <div style="width: 100%;  height: 100%; background: blue;">
               </div>
            </div>
         </div>
      </div>
<br>
<br>
      <div style="width:300px; height:300px;            background:yellow; padding: 20px; border:5px solid #159; position:relative;">
      <div style="width:200px; top:0; left:0; bottom:0; background:red;    padding: 20px; border:5px solid #951; position:absolute;">
      <div style="width:100px; top:0; left:0; bottom:0; background:pink;   padding: 20px; border:5px solid #393; position:absolute;">
      <div style="width:50px;  top:0; left:0; bottom:0; background:blue;   padding: 20px; border:5px solid #993; position:absolute;">
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
...
Рейтинг: 0 / 0
15.10.2012, 09:33:15
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37998174
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
дадуда___Какие-то костыли колхозного CSS. Народ юзает JavaScript.
У тебя не верные сведения...
...
Рейтинг: 0 / 0
15.10.2012, 11:17:53
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37998177
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Seegileверхний бордюр не накладывается, а только нижний.
Потому как толщина бордера только в ИЕ "входит" в размер блока... У остальных "размер блока" определяется только внутренней частью.
...
Рейтинг: 0 / 0
15.10.2012, 11:20:37
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37998258
Seegile
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Seegile
Участник
krvsa, я просто очень тупой. Верхний бордюр понимает нормально т.е. под ним вывод идёт, а с нижним - накладывается на него, а не перед ним.
...
Рейтинг: 0 / 0
15.10.2012, 12:04:43
| Ответить | Цитировать | Написать  
Расягивать DIV по высоте родительского
    #37999657
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот неплохая статейка по колоночному макету...
...
Рейтинг: 0 / 0
16.10.2012, 08:41:31
| Ответить | Цитировать | Написать  
19 сообщений из 19, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Расягивать DIV по высоте родительского
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=154&tid=1449234]:
 0ms
get settings:
 9ms
get forum list:
 11ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 56ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 47ms
get tp. blocked users:
 1ms
others: 210ms
total:  346ms
созд. / загр.: 346ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]