Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.08.2011, 16:22   #1
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для vedro-compota
 
Регистрация: 13.04.2010
Сообщений: 1,156
По умолчанию Сделать дочерний блок, равный во высоте родительскому.

Здравствуйте , уважаемые программисты и верстальщики)
Вопрос довольно указанный в заголовке , судя по информации в интернете довольно избит, а решение , как во многим местах говориться "не тривиально", но знает ли кто нибудь пример подобного решения?
и вот ещё связанный с предыдущим, но более конкретный вопрос -
имеется, значит блок переменной высоты, которая определяется числом сообщений , справа в этом блоке располагаются сообщения, а слева картинка, состоящая из трёх частей - средняя из которых , как раз-таки и призвана растягиваться на всю имеющуюся высоту прадедовского блока
(родительский блок полосы содержит три её сегмента и находится на одном уровне иерархии с сообщениями ) собственно вот разметка -
Код:
<div id="dynamic"> 
        	 <div id="left_line">
				 <div id="left_line_top">        
				 </div>
				 <div id="left_line_middle">        
				 </div>
				 <div id="left_line_foot">        
				 </div>
			   </div>
			   <div id="message_area"> 
               </div>
			   <div id="message_area"> 
               </div>
			   <div id="message_area"> 
               </div>
			   <div id="message_area"> 
               </div>
			   	   <div id="message_area"> 
               </div>
			   	   <div id="message_area"> 
               </div>
			   	   <div id="message_area"> 
               </div>
           		
		 		  
        </div>
css -
Код:
#left_line   { 
              margin-left:5px; 
              padding:0px;
              background-repeat: no-repeat;
              border: dashed 1px;
              /*height: 100%;*/ 		
              width: 30px ; 
			  float: left;

            			  }
#left_line_top   {position:relative ;
              margin:0px; 
              padding:0px;
              background-image:  url('images/LeftLine/LeftLineTop.jpg');
              background-repeat: no-repeat;
              width: 4px ;  
              height: 122px ; 
             // border: dashed 3px;			  }			  
#left_line_middle{
                   background-image:  url('images/LeftLine/LeftLineMiddle.jpg');
				   width: 4px;
				  height: 100%; /*83px*/
				 // float: left;
				
			       }
#left_line_foot{
                background-image:  url('images/LeftLine/LeftLineFoot.jpg');
				width: 3px;
				height: 105px;
				 }
#dynamic     { 
            margin:0px; 
            padding:0px; 
               top: 0px;
               left: 0px;
               width: 1024px; /* всё , кроме стихийных сообщений */
                overflow: auto;
			   border: dashed 5px;
			   //background: #000000;
              }
#message_area {position: relative;
                 margin-left:0px; 
                 padding:0px;
                 background-image:  url('images/message/MessageArea.jpg');
                 background-repeat: no-repeat;
				 font: 13px Arial,Tahoma,Sans-serif;
                 top: 0px;
                 left: 0px ;
                 width: 710px ;  
                 height: 174px ; 
				 border: dashed 1px;
				 float: left;
                 				 }
вот как раз #left_line_middle и охота растянать по неопределённому размеру #dynamic

понимаю, что вопрос сложный ,да и нет времени вникать, номоже кто-то знает разобранные решения из этой серии. если так - то подскажите пожалуйста)

заранее благодарю)
против абортов=за + жизнь;.фкн вгу;_______________________мойблг
vedro-compota вне форума Ответить с цитированием
Старый 22.08.2011, 22:22   #2
TranceSmile
Смайлик :)
Форумчанин
 
Аватар для TranceSmile
 
Регистрация: 12.12.2010
Сообщений: 445
По умолчанию

Вот в этом макете это реализовано. Поковырай, а то мне после картошки не очень хочется(
Ну я так понял что #left_line_middle нужно добавит свойство position:relative;
Вложения
Тип файла: zip layout_html5_fix_lc_s1_eh_1.zip (2.1 Кб, 8 просмотров)
Самый перспективный framework Yii (c)
TranceSmile вне форума Ответить с цитированием
Старый 23.08.2011, 01:05   #3
Nezznayka
 
Аватар для Nezznayka
 
Регистрация: 19.08.2011
Сообщений: 6
По умолчанию

- вопрос не сложный, сложный твой код

Вот так должно работать:


Код HTML:
@charset "utf-8";

#dynamic { 
	margin:0px; 
	padding:32px; 
	top: 0px;
	left: 0px;
	width: 1024px;
	overflow: auto;
	border: dashed 5px;
}

#left_line {
	position:absolute;
	height: 100%; 		
	width: 4px ; 
	border:1px dashed #000;
}

#left_line_top {
	position:absolute;
	width: 4px;  
	height: 122px; 	
	background: url('images/LeftLine/LeftLineTop.jpg');
}			  

#left_line_middle{
	position:absolute;
	top:122px;
	bottom:105px;
	width:4px;
	background-image: url('images/LeftLine/LeftLineMiddle.jpg');
}

#left_line_foot{
	position:absolute;
	bottom: 0;
	width: 4px;
	height: 105px;
	background: url('images/LeftLine/LeftLineFoot.jpg');
}

#message_area {
	position: relative;
	margin:10px;
	padding:10px;
	background: no-repeat  url('images/message/MessageArea.jpg') ;
	font: 13px Arial,Tahoma,Sans-serif;
	border: dashed 1px;
}
P.S. не забудь на полнить текстом несколько сообщений
Nezznayka вне форума Ответить с цитированием
Старый 23.08.2011, 13:29   #4
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для vedro-compota
 
Регистрация: 13.04.2010
Сообщений: 1,156
По умолчанию

TranceSmile , благодарю за пример, пытаюсь с ним разобраться.
Nezznayka , замечательный пример! спасибо)

но вот почему-то свойство
Код:
#left_line_foot{
	position:absolute;
	bottom: 0;
притягивает линию к самому низу страницы , а не к нижней части #left_line - блока
в то время как top вроед как вычисляется относительно родительского элемента....
прикрепляю макет , может глянете.
Вложения
Тип файла: zip eg1.zip (255.9 Кб, 8 просмотров)
против абортов=за + жизнь;.фкн вгу;_______________________мойблг

Последний раз редактировалось vedro-compota; 23.08.2011 в 13:31.
vedro-compota вне форума Ответить с цитированием
Старый 25.08.2011, 14:07   #5
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для vedro-compota
 
Регистрация: 13.04.2010
Сообщений: 1,156
По умолчанию

никто не знает как это- того? решить в смысле)
против абортов=за + жизнь;.фкн вгу;_______________________мойблг
vedro-compota вне форума Ответить с цитированием
Старый 25.08.2011, 15:11   #6
kettanaito
Веб-дизайнер
Форумчанин
 
Аватар для kettanaito
 
Регистрация: 11.08.2011
Сообщений: 305
По умолчанию

Код:
#left_line_foot{
	position:absolute;
	bottom: 0;
Абсолютная позиция не даст тебе никаких вычислений по отношению к родительским элементам. Используй position:relative; Извиняюсь, но не полностью понял суть проблемы.
kettanaito вне форума Ответить с цитированием
Старый 25.08.2011, 19:51   #7
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для vedro-compota
 
Регистрация: 13.04.2010
Сообщений: 1,156
По умолчанию

kettanaito , а как же -
Цитата:
absolut – абсолютное. Положение и, возможно, размер элемента определяются значениями свойств top, bottom, left и right, задающих смещение относительно границ содержимого родительского элемента. Абсолютно позиционированные блоки исключаются из нормального потока, никак не влияя на размещение всех остальных элементов. Если абсолютно позиционированный элемент имеет отступы, определённые свойством margin то они не перекрываются с отступами других элементов;
это из книги Артемия Ломова...
-------------------
kettanaito , собственно говоря, действительно - проблема в том , что не получает привязать координаты вложенного блока под размер родительского.
против абортов=за + жизнь;.фкн вгу;_______________________мойблг

Последний раз редактировалось vedro-compota; 25.08.2011 в 20:02.
vedro-compota вне форума Ответить с цитированием
Старый 25.08.2011, 20:16   #8
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для vedro-compota
 
Регистрация: 13.04.2010
Сообщений: 1,156
По умолчанию

так. вроде получилось!
у Nezznayka в примере всё правильно только надо было бы явно указать=
Код:
#dynamic { 
        position:relative; // этого не хватало)
	margin:0px; 
	padding:32px; 
	top: 0px;
против абортов=за + жизнь;.фкн вгу;_______________________мойблг
vedro-compota вне форума Ответить с цитированием
Старый 25.08.2011, 21:43   #9
kettanaito
Веб-дизайнер
Форумчанин
 
Аватар для kettanaito
 
Регистрация: 11.08.2011
Сообщений: 305
По умолчанию

vedro-compota, вижу, но все же на практике абсолют чаще ссылается к материнскому элементу как к странице в целом. Да и зачем идти длинным путем когда relative в нашем распоряжении
kettanaito вне форума Ответить с цитированием
Старый 25.08.2011, 22:08   #10
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для vedro-compota
 
Регистрация: 13.04.2010
Сообщений: 1,156
По умолчанию

мм...но весь смысл в том.чтобы определить произвольный размер родительского блока -
то есть необходимо изменение размера именно относительно родительского - поэтому и абсолют)
против абортов=за + жизнь;.фкн вгу;_______________________мойблг
vedro-compota вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Дочерний класс от TListItem EaRLL Общие вопросы Delphi 14 18.04.2011 05:36
Если в столбцах, встретился элемент, равный сумме Aluckard Помощь студентам 2 28.11.2010 12:36
Обращение к родительскому окну delphi 8 .net Alik221 Помощь студентам 3 04.08.2010 12:37
Сформировать одномерный массив равный двумерному семечко Помощь студентам 3 07.10.2009 23:37
Программа, выполняет дочерний процесс IgorArhangel Помощь студентам 3 24.01.2009 23:12