1

Доброго дня уважаемые.

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

На данный момент имею 5 блоков. блок шапка (сам по себе, его не трогаю).

Под шапкой находится родительский блок 1

внутри него четыре блока:

1 - родительский блок,

2 - блок меню

3 - второй родит блок для текста

4 - div текст

5 - див IMG

введите сюда описание изображения

Смысл в том, что при наполнении блока 4-div текст, он расширяется вниз, и должен расширять родительский блок 1. при этом, что бы блок меню не висел огрызком, он должен растягиваться на 100% по высоте за родительским блоком. т.е. меню должно всегда быть одной высоты с блоком текст, даже когда блок текст растягивается в длину. то же самое и с блоком img должно быть. Все три блока должны тянуться вниз за блоком "текст".

помогите, сам не осилил.

хочется, что бы было вот так: введите сюда описание изображения

но получается вот так: введите сюда описание изображения

Честно говоря, я запутался. и тот код, который получился.. возможно ли что то понять? ...

	<style>
	
	
	body {background: #696969; font-family: Verdana, Helvetica, Arial, sans-serif;}
	
	#d1{ 
	max-width: 1240px; 
	margin: 0px 0px 0 0px;
	height: 320px;
	background: #c8c5c6;
	}
	#d1 img {
    max-width: 200px;
    max-height: 200px;
	margin: 60px 0 60px 60px;}
	
	#p1 
	{float: right;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	text-align:center;
	color: #fff;
	margin: 150px 210px 30px 0;
	font-size: 24px;
	text-shadow: 2px 2px 3px #000;
	}
		
	
	
	#wrapper {
	width: 1240px; /* ширина основного блока */
	height: 100%; /* высота для наглядности */
	margin: 0 auto ; /* задаем отступ слева и справа auto чтобы сработало выравнивание по центру */
	padding: 0px;
	}
	
	#centerblock
	{
	width: 100%; /* ширина  */
	max-height: 100%; /* высота  */
	margin: 0; 
	padding: 0px;
	overflow: inherit;
	}
	
	
	#d2{
	margin: 0px;
	width: 300px;
	min-height: 800px;
	height: 100%;
	background: #D3D3D3; /* Цвет фона */ 
	float: left; /*сделали плавающим и закинули в левый угол. */
	overflow: auto	/*отвечает за отображение содержимого блока, если оно вых-т за его пределы.
	(visible- значение по умолчанию) (hidden- все что за пределами блока, скрывается) 
	(scroll- полоса прокрутки но добавляет две полосы справа и внизу) (auto- добавляет плолсу прокрутки только там где надо) */
	}
	
	#portal {margin-left: 10%; color: #0000FF; }	
	
	#d3  {text-align: left;}
	#d3 {
    width: 940px; 
	min-height: 800px;
	max-height: 100%;
	margin-left: 300px;
    background: #FFFFFF; /* Цвет фона */
   	overflow: inherit

   }
   
   #txtmain {	   
	background: #c1c2c3;
    max-width: 640px; 
	height: 100%
    margin: 0 0px 0 0px; /* Значение отступов */
    padding: 0px; /* Поля вокруг текста */
	border:  0px solid #0a0; /* рамка */
   	float: left;
	margin: 0px;
	
   }
   
   #txtsecondary { 
	background: #f00;
	max-width: 300px; 
	height: 100%;    
	margin: 0 0px 0 0px; /* Значение отступов */
    padding: 0px; /* Поля вокруг текста */
	border: 0px solid #0a0; /* рамка */
	margin: 0 0 0 0px ;
	overflow: auto
   }
   
   
   
   #d4{ 
	max-width: 1200px; 
	margin: 0px 30px 30px 30px;
	border: 0 solid #090;
	height: 150px;
	}
	
	
	
	
	#d21 {
		float: left; /*сделали плавающим и закинули в левый угол. */
		padding: 20px 10px 10px 5px; /*задали отступ для меню сверху слева и справа, и дополнительный отступ будет в меню ul*/
		
		color: #789; /*перекрасили текст заголовка в меню*/
		
		width: 270px; /*задали ширину для блочного жлемента (кнопки в меню)*/
		
		}
	
		#d21 ul {padding-left: 20px; /*задали отступ для меню слева в меню ul*/
				list-style: none; /*убрал курсорную точку в списке перед ссылкой.*/
				
		}
			

			
			
		#d21 h2 {
			color: black;
			
			text-align:  center;
			
			margin: 10px 0; /*отступы снизу и сверху у заголовка в меню*/
		}	


		/*форматируем текст, в меню, который выглядет как ссылка, мы ему задаем свой шрифт и цвет и оформление*/
		
		
		#ul21 a {
				border: 1px solid #C0C0C0; /* рамка для ссылок в меню */
				padding: 10px 0 10px 35px ; /*у строчных элементов отступы работают только горизонтальные, поэтому надо переводить в блок и задавать блочные отступы*/
				display: block; /*перевели в блочный элемент*/
				margin-bottom: 5px; /*сделали отступ между блоками кнопками*/
				border-radius: 10px; /*закруглики уголки у кнопок*/
				color: black;
				background: #fff; /*фон кнопок*/
				font-weight: bolder;
				text-decoration: none; /*убрали подчеркивание, которое обычно есть у ссылок*/
				font-family: arial, sans-serif; /*задали другой шрифт тексту*/
		}
		
		#ul21 a:hover {background: #F8F8FF;}
		
		 #contacts a{
				border: 1px solid #C0C0C0; /* рамка для ссылок в меню */
				padding: 10px 0 10px 15px ; /*у строчных элементов отступы работают только горизонтальные, поэтому надо переводить в блок и задавать блочные отступы*/
				display: block; /*перевели в блочный элемент*/
				margin-bottom: 0; /*сделали отступ между блоками кнопками*/
				border-radius: 10px; /*закруглики уголки у кнопок*/
				color: black;
				background: #808080; /*фон кнопок*/
				font-weight: bolder;
				text-decoration: none; /*убрали подчеркивание, которое обычно есть у ссылок*/
				font-family: arial, sans-serif; /*задали другой шрифт тексту*/
		}
				
				
		
		#ul22 a {
				padding: 5px 0 5px 15px ; /*у строчных элементов отступы работают только горизонтальные, поэтому надо переводить в блок и задавать блочные отступы*/
				
				color: black;
				
				text-decoration: none; /*убрали подчеркивание, которое обычно есть у ссылок*/
				font-family: arial, sans-serif; /*задали другой шрифт тексту*/
				
		}
		
		.paragraph {
			text-align:  left;
			font-size: 18px;
			font-weight: bold;
		}
		
		p {
			text-align:  left;
			margin: 10px 0; /*отступы снизу и сверху у заголовка в меню*/
			
		}		
		
		ul {text-align:  left;
			font-size: 14px;
		}
	
		
		caption {
		color: #000;
		padding: 10px 0;
		font: 14pt Arial, sans-serif;}	
		
		table {text-align:  center;
		}
		

			
			
			
	</style>
<div id="wrapper"><!--делаем обертку, что бы сайт сжимался и разжимался вместе с окном-->
	
			<div id="d1"> <!--верхний блок-->
			<p id="p1">Контакты:<br>
			Тел: 8 (916) 580-30-77 <br>
			Тел: 8 (916) 502-26-67 <br>
			E-mail: [email protected]</p>
			
			<a href="index.html" ><img src="img/proofprint.png" alt="logo proofprint" title="На главную страницу"></a>
			
			
			</div><!--верхний блок-->
			
<div id='centerblock'>
			<div id="d2"> <!--левый блок-->
							<div id="d21">
								<h2>Услуги</h2>
								<ul id="ul21">
									<li><a href="vizitka.html" title="Печать визиток".>Визитки</a></li>
									<li><a href="Listovki.html" title="Напечатать листовки".>Листовки</a></li>
									<li><a href="buklet.html" title="Печать буклетов".>Буклеты</a></li>
									<li><a href="broshure.html" title="Печать брошюр".>Брошюры / Каталоги</a></li>
									<li><a href="fotolumen.html" title="Печать на пленке".>Пленка </a></li>
									<li><a href="dezigner.html" title="Верстка".>Верстка и дизайн</a></li>
									<li><a href="montaz.html" title="Монтаж рекламы".>Монтаж / демонтаж</a></li>
									<li><a href="dostavka.html" title="Доставка полиграфии".>Доставка</a></li>
								</ul>
								</ul>
									
							</div>
							
							<div id='portal'>
							
							<h3>Мы есть на портале поставщиков</h3>									
							<img src="img/Postavshikov.gif" alt="logo portal postavshikov" title="Мы есть на портале поставщиков"></a>
							
							</div>
												
			</div><!--левый блок-->
			
			
			
			<div id="d3"> <!--текстовый блок-->
				<div id="txtmain">
					<h1> Печать визиток:</h1>
			
				
			
			
											<table  border='1' bordercolor='#ffffff' cellpadding='10' cellspacing='0' bgcolor='#cccccc' width='100%'>

									<caption>Стоимость изготовления стандартных* односторонних визиток:</caption>

									<tbody>

										<tr bgcolor='#ffcc66'>
											<th>Тираж
											<th>Цена
										</tr>

										<tr>
											<td>100 шт
											<td>400 руб
										</tr>

										<tr>
											<td>1000 шт
											<td>1700 руб
										</tr>

									</tbody>

									</table>
				
				
						<h5>*Стандартная визитка: размер 90х50 мм на мелованной бумаге 150 грамм.
						</h5>
						
							<p> Визитная карточка (визитка) является неотъемлемой частью представителя любой компании.<br>
							Для печати визиток используется абсолютно разная Бумага, в большинстве случаев это стандартный картон 300 гр с нанесением информации и логотипа компании.<br>
								<p>Обратитесь к нашим специалистам и они помогут подобрать бумагу для визитки, соответствующую вашим пожеланиям и фирменному стилю.</p>
							<p>Принято считать, что визитка должна быть односторонней, т.к. вторая сторона предназначена для заметок.
							Но с точки зрения продвижения, вторую сторону визитки можно использовать, для указания основного вида деятельности вашей компании. </p>
							Укажите там самые популярные услуги или товары. Но традиционно, большинство компаний, на обратной стороне визитки дублируют контактные данные на английском, или другом иностранном языке.
						</p>
							<p>Принято считать, что визитка должна быть односторонней, т.к. вторая сторона предназначена для заметок.
							Но с точки зрения продвижения, вторую сторону визитки можно использовать, для указания основного вида деятельности вашей компании. </p>
							Укажите там самые популярные услуги или товары. Но традиционно, большинство компаний, на обратной стороне визитки дублируют контактные данные на английском, или другом иностранном языке.
						</p>
						<p>Так же мы можем изготовить визитки от 1000 шт и более, для промо - раздачи, или если все сотрудники вашей компании используют общую обезличенную визитную карточку.
						</p>
				 
						<h4> Наши дизайнеры с удовольствием разработают для Вас несколько вариантов <a href="dezigner.html" title="Верстка и дизайн макетов быстро и не дорого">дизайна</a> визитки 
						</h4>
						
						
						
						
						
						
				</div> <!-- txtmain -->
				
				<div id="txtsecondary">
				
				</div>
			</div> <!--текстовый блок-->
</div> <!-- centerblock-->
		

	<div id="d4"> <!--подвал-->
</div> <!--Подвал закрыт-->
</div> <!--wrapper закрыли обертку-->

2 ответа 2

2

В итоге, получилась вот такая красота, которую я наполню и будет мне счастье. еще раз спасибо!

header {
  width: 1200px;
  height: 60px;
  line-height: 60px;
  background-color: #49f;
  text-align: center;
}
#content-wrapper {
  width: 1200px;
  display: flex;
}
#left-sidebar {
  margin: 0px;
  padding: 5px;
  border: 1px solid #dedede;
  }

#right-sidebar{
  margin: 0px;
  padding: 5px;
  border: 1px solid #dedede;
  
  }

#left-sidebar {
  width: 40%;
}
#right-sidebar {
  width: 30%;
}
footer {
  display: flex;
  width: 1200px;
  height: 60px;
  background-color: #49f;
}
#footer-block{
  margin: 0px;
  padding: 5px;
  border: 1px solid #dedede;
  width: 30%;
  }
<header>Header</header>
<div id="content-wrapper">
  
	<div id="left-sidebar">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Все первую правилами, однажды, встретил назад мир домах предупреждал переулка подзаголовок своего за, алфавит взобравшись.
  </div>
  
	<div id="right-sidebar">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.<br> Сбить, пунктуация рыбного все безопасную моей встретил над домах коварных, наш реторический вопрос, подзаголовок первую решила свой которое за она парадигматическая свой путь они, страну предупд домах коварных, наш реторический вопрос, подзаголовок первую решила свой которое за она парадигматическая свой путь они, страну предупреждал что ipsum гор! Рыбного з повстречался, свою пояс страна?<br> Свой свою жаренные по всей она, возвращайся образ пустился, единственное. Его реждал что ipsum гор! Рыбного з повстречался, свою пояс страна?<br> Свой свою жаренные по всей она, возвращайся образ пустился, единственное. Его прямо которой она пустился встретил! Ipsum точках составитель ее реторический власти, текста то сих скатился, безопасную до языкового снова строчка.
  </div>
  <div id="left-sidebar">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Все первую правилами, однажды, встретил назад мир домах предупреждал переулка подзаголовок своего за, алфавит взобравшись.
  </div>
  
</div>
<footer>
 
  <div id="footer-block"> подвал </div>
  <div id="footer-block">подвал </div>
  <div id="footer-block">подвал </div>
  <div id="footer-block">подвал </div>
  <div id="footer-block">подвал </div>
</footer>

</html>

2

Это легко достичь при помощи Flexbox. Делаешь обертку для content'а, например, <div class="content-wrapper"> и задаешь ему свойство display: flex; Например:

header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  box-shadow: 0px 2px 5px rgba(0,0,0, 0.25);
  text-align: center;
}
.content-wrapper {
  display: flex;
}
.left-sidebar, .right-sidebar {
  margin: 5px;
  padding: 15px;
  border: 1px solid #dedede;
}
.left-sidebar {
  width: 30%;
}
.right-sidebar {
  width: 70%;
}
<header>Header</header>
<div class="content-wrapper">
	<div class="left-sidebar">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Все первую правилами, однажды, встретил назад мир домах предупреждал переулка подзаголовок своего за, алфавит взобравшись.</div>
	<div class="right-sidebar">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.<br> Сбить, пунктуация рыбного все безопасную моей встретил над домах коварных, наш реторический вопрос, подзаголовок первую решила свой которое за она парадигматическая свой путь они, страну предупреждал что ipsum гор! Рыбного запятых повстречался, свою пояс страна?<br> Свой свою жаренные по всей она, возвращайся образ пустился, единственное. Его прямо которой она пустился встретил! Ipsum точках составитель ее реторический власти, текста то сих скатился, безопасную до языкового снова строчка.</div>
</div>

P.S. Второй пример:

.content-wrapper {
    margin-left: auto;
    margin-right: auto;    
    max-width: 960px;
    position: relative;
}

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
    background: red;
}

.content {
    margin-left: 240px;
    padding: 1.5em;
    min-height: 200px;
}
<div class="content-wrapper">
  <div class="left-sidebar">menu</div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iste vitae vero magnam ad doloremque dicta placeat pariatur cum blanditiis! Voluptas ut blanditiis veritatis quaerat temporibus nostrum fugiat animi voluptatum quo numquam dignissimos maiores minus voluptatibus asperiores enim cupiditate aliquam impedit dolorum. Quod voluptatem molestiae at cum natus placeat animi deserunt totam quia officiis harum neque aliquam eligendi sed sunt eum tempora eveniet asperiores velit reiciendis cupiditate ex dolores quis eius nihil aliquid cumque ullam. Adipisci suscipit soluta recusandae nostrum. Id odit dolor exercitationem quis dignissimos minima veniam vol totam voluptatum commodi dolor quae eligendi necessitatibus sed sequi earum fugit voluptas corporis ut tempora nobis voluptate modi qui odio nesciunt ipsum repellat eveniet molestiae. Labore iusto laborum aperiam veritatis quis a error debitis sapiente tempora totam pariatur dolorem eligendi ducimus deleniti quod cum sequi placeat assumenda magni consequuntur? Distinctio et repellat architecto placeat nam aspernatur libero deserunt quae doloribus qui dolorem dolorum fuga similique sit animi vitae cum consectetur recusandae minima tempore rem laborum iste nesciunt magni quisquam facilis ducimus explicabo numquam dolore non. Quasi nostrum impedit rem aut iure quidem quis asperiores nesciunt id enim eius odit corrupti excepturi perspiciatis ducimus quas incidunt ad tempore cum nisi blanditiis laudantium similique placeat dicta beatae inventore corporis veniam. Libero temporibus dolore eligendi nisi optio.</p>
  </div>
</div>

6
  • Виталий, спасибо огромное. к сожалению я не смог адаптировать свой код (буду еще пытаться), но на основе вашего смогу заново построить нужную мне структуру. 12 янв 2018 в 9:29
  • Рад помочь, научишься) 12 янв 2018 в 10:44
  • Виталий, все сделал, как вы написали, открвыл в гугл хром - получилось. Но радость была не долгой, т.к. в браузере Explorer эти фишки не работают и сайт выдается кривой. :( может быть есть еще вариант? 13 янв 2018 в 19:36
  • @Александр Обновил немного пример, пробуй 14 янв 2018 в 11:58
  • странно, если делать с нуля, то получается как у вас, все работает, а если пытаюсь встроить в сайт, все слетает. злюсь ))) 17 янв 2018 в 18:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.