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

в колхозном CSS этого сделать нельзя. используй яваскрипт
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.10.2012, 15:50:52
    #37996974
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
Ну отчего же? Условий у нас немного, поэтому сразу вижу вариант дива с абсолютным позиционированием, у которого не задана высота, но есть привязка к верзнему, нижнему и левому кряю:
Код: 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, 16:09:18
    #37996989
дадуда___
дадуда___
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
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:33:14
    #37997000
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
IDVsbruck,
Просто отлично, помогло )))

дадуда___,
Там где можно обойтись без js я обхожусь без него и не вижу причин поступать наоборот. Может вы знаете такие причины?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.10.2012, 16:46:50
    #37997014
Ифреймов Вася
Ифреймов Вася
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
IDVsbruckНу отчего же? Условий у нас немного, поэтому сразу вижу вариант дива с абсолютным позиционированием, у которого не задана высота, но есть привязка к верзнему, нижнему и левому кряю
может я чего не понял
почему нельзя просто height:100% указать вложеному диву?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.10.2012, 17:44:44
    #37997049
Seegile
Seegile
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
Работает. :)
Код: 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
| Ответить | Цитировать | Написать  
14.10.2012, 00:35:11
    #37997353
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
Я посмотрел, работают оба варианта, но в варианте где height:100% внутренняя панель немного вылезает за нижний край внешней панели.
В общем оставил первый вариант.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2012, 01:27:45
    #37997368
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
Если указывать box-sizing:border-box, то не будет вылазить.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2012, 06:11:15
    #37997404
Seegile
Seegile
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
SQL-Talkerвнутренняя панель немного вылезает за нижний край внешней панели.
т.е. бордёр накладывается на другой?
Это скорее дурной глюк. Почему глюк? Потому что верхний бордюр не накладывается, а только нижний.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2012, 06:14:18
    #37997405
Seegile
Seegile
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
Еще как вариант можно главному div прописать padding-bottom: 1px;.
А box-sizing только в css3.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2012, 06:30:26
    #37997406
Seegile
Seegile
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
Код: 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, 15:23:56
    #37997560
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
SeegileА box-sizing только в css3.
Это понятно. Но разве у нас были ограничения?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2012, 19:53:41
    #37997727
Seegile
Seegile
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
Почему этот код даёт такой же эффект как на картинке выше?
Почему игнор 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
| Ответить | Цитировать | Написать  
15.10.2012, 09:33:15
    #37997974
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
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, 11:17:53
    #37998174
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
дадуда___Какие-то костыли колхозного CSS. Народ юзает JavaScript.
У тебя не верные сведения...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.10.2012, 11:20:37
    #37998177
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
Seegileверхний бордюр не накладывается, а только нижний.
Потому как толщина бордера только в ИЕ "входит" в размер блока... У остальных "размер блока" определяется только внутренней частью.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.10.2012, 12:04:43
    #37998258
Seegile
Seegile
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
krvsa, я просто очень тупой. Верхний бордюр понимает нормально т.е. под ним вывод идёт, а с нижним - накладывается на него, а не перед ним.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.10.2012, 08:41:31
    #37999657
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Расягивать DIV по высоте родительского
Вот неплохая статейка по колоночному макету...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Расягивать DIV по высоте родительского / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 454ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1449234]:
 0ms
get settings:
 7ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 160ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 52ms
get tp. blocked users:
 1ms
others: 203ms
total:  454ms
x
x
Закрыть


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