Jump to content
  • 0

Резиновый <div> по вертикали

px379

Asked by px379,

 Share

Question

px379 Explorer

px379

Posted
Posted (edited)

Здравствуйте! Помогите с такой проблемой. На сайте есть шапка, в шапке будут расположены еще несколько div-ов.

Задача: надо сделать так, что бы шапка растягивалась по вертикали, в зависимости от наполнения ее контентом.

 

Высота шапки установлена 100%, в результате, шапка увеличилась по вертикали на большее расстояние чем ожидалось.

Screen_Shot00009.jpg

 

 

HTML

<!DOCTYPE html><html><head><title>HYBRID - главная</title><meta charset="utf-8"><link href="style.css" rel="stylesheet" media="all"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css"></head><body><!-- Верхняя шапка --><div id="top_header">	<a href="index.html"><img src="images/logo_rd.png" width="272" height="70" alt="RanDesign-экономное электроотопление" /></a>		<!-- Форма - Заказать ЗВОНОК! -->	<form action="" id="order_call">		<input type="text" required placeholder="Ваше имя" size="25">		<input type="tel" required placeholder="Номер телефона" size="25">		<input type="submit" value="Заказать ЗВОНОК!" name="submit" class="call_alert" />	</form></div><!-- МЕНЮ --><ul id="css3menu1" class="topmenu">	<li class="topfirst"><a class="pressed" href="index.html">Главная</a></li>	<li class="topmenu"><a href="#">Контакты</a></li>	<li class="topmenu"><a href="#">Доставка</a></li>	<li class="topmenu"><a href="#">Гарантии</a></li>	<li class="topmenu"><a href="#">Вопросы и ответы</a></li>	<li class="toplast"><a href="#">Преимущества</a></li></ul><!-- Шапка --><div id="header">	<div id="akciya"></div><!-- Акция -->	<div id="tag"></div><!-- Ярлык - СПЕШИТЕ --></div><!-- Контент --><div id="content"><p><strong>А в этот день, много лет назад...</strong><br />1. 9 апреля 1942 года японская авиация в составе 91 Nakajima B5N2 и 85 Aichi D3A1 при поддержке 45 истребителей A6M2 совершили налет на британскую военно-морскую базу в Трикомали (о.Цейлон).Не встретив практически никакого сопротивления, японская авиация отправила на дно авианосец "Гермес", монитор "Эребус", эсминец "Вампайр", корвет "Холлихок", транспорты "Сагаинг", "Норвикен", "Этельстоун" и танкер "Бритиш Сержант", не тронув при этом госпитальное судно. Потери японцев составили 13 самолетов.(на фото: постановочное выступление группы "Тора! Тора! Тора!")2. 9 апреля 1945 г. в HИИ ВВС благополучно завершились государственные испытания истребителя Як-ЗП (летчик В.Г.Иванов, ведущий инженер по самолету И.А.Колосов, по вооружению - А.Г.Аронов). Было произведено 37 полетов общей продолжительностью 17 ч 39 мин.По результатам госиспытаний было отмечено, что самолет с тремя пушками Б-20 необходим для ВВС.3. 9 апреля 1945 года, постановлением Государственного комитета обороны ОКБ-115 поручалось спроектировать, построить и передать на испытания одноместный истребитель с одним реактивным двигателем типа ЮМО-004 (Junkers Jumo-004) тягой 900 кгс. Для ускорения процесса разработки за основу был взят Як-3. Первый прототип истребителя получил обозначение Як-ЮМО (в ряде документов он фигурировал как Як-3-ЮМО или "экспериментальный истребитель конструкции А.С.Яковлева").4. 9 апреля 1945 года, самолеты De Havilland Mosquito FB.XVIII “Tse-Tse” Берегового командования показали потрясающую результативность. В течение одного дня ими было уничтожено три немецкие подводные лодки. Все три победы были достигнуты использованием неуправляемых реактивных снарядов.5. 9 апреля 1948 года, серийный самолет В-36 А совершает полет продолжительностью 32 часа на расстояние 9800 км с 4540 кг бомб, которые были сброшены примерно на середине маршрута, средняя скорость перелета составила 306 км/ ч. Полет проходил при двух выключенных двигателях.6. 9 апреля 1952 года, впервые в Великобритании на первом прототипе английского палубного истребителя De Havilland DH.110 “Sea Vixen” было достигнуто число Маха больше 1 в горизонтальном полете.7. 9 апреля 1953 года, состоялся первый официальный полет первого в мире реактивного гидросамолета - Convair XF2Y-1 “Sea Dart” с двигателями Westinghouse J34-WE-32.8. 9 апреля 1960 года американскими спецслужбами была проведена неординарная разведывательная операция. Самолет-разведчик Lockheed U-2 за один полет на высоте 20.000 метров пролетел над такими сверхсекретными объектами Советского Союза, как: Семипалатинский ядерный полигон, авиабаза стратегических бомбардировщиков Ту-95, полигон зенитных ракетных войск близ Сары-Шага-на, ракетный полигон Тюра-Там (космодром Байконур). После чего разведчик U-2 покинул пределы воздушного пространства СССР в районе города Мары.</p></div><!-- Подвал --><footer></footer></body> </html>

CSS

html, body{background: #fff;font: 12pt Tahoma;padding: 0;margin:0;height: 100%;}#top_header{margin: 1%; /* Отступы вокруг элемента */background: #fff; /* Цвет фона */}/*Кнопка - Срочный ЗВОНОК!*/#order_call{float: right;padding-top: 1.5%;border: solid 0px;}input{font: 15pt Arial;}.call_alert{text-decoration:none; text-align:center;  padding:5px 10px;  border:solid 1px #660000;  -webkit-border-radius:4px; -moz-border-radius:4px;  border-radius: 4px;  font:18px Arial, Helvetica, sans-serif;  font-weight:bold;  color:#ffffff;  background-color:#cc0000;  background-image: -moz-linear-gradient(top, #cc0000 0%, #660000 100%);  background-image: -webkit-linear-gradient(top, #cc0000 0%, #660000 100%);  background-image: -o-linear-gradient(top, #cc0000 0%, #660000 100%);  background-image: -ms-linear-gradient(top, #cc0000 0% ,#660000 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660000', endColorstr='#660000',GradientType=0 );  background-image: linear-gradient(top, #cc0000 0% ,#660000 100%);    -webkit-box-shadow:0px 0px 2px #000000, inset 0px 0px 1px #ffffff;  -moz-box-shadow: 0px 0px 2px #000000,  inset 0px 0px 1px #ffffff;   box-shadow:0px 0px 2px #000000, inset 0px 0px 1px #ffffff;   text-shadow: 3px 3px 7px #333333;  filter: dropshadow(color=#333333, offx=3, offy=3); }  .call_alert:hover{ padding:5px 10px;  border:solid 1px #660000;  -webkit-border-radius:4px; -moz-border-radius:4px;  border-radius: 4px;  font:18px Arial, Helvetica, sans-serif;  font-weight:bold;  color:#ffffff;  background-color:#ff0000;  background-image: -moz-linear-gradient(top, #ff0000 0%, #990000 100%);  background-image: -webkit-linear-gradient(top, #ff0000 0%, #990000 100%);  background-image: -o-linear-gradient(top, #ff0000 0%, #990000 100%);  background-image: -ms-linear-gradient(top, #ff0000 0% ,#990000 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#990000',GradientType=0 );  background-image: linear-gradient(top, #ff0000 0% ,#990000 100%);    -webkit-box-shadow:0px 0px 2px #000000, inset 0px 0px 1px #ffffff;  -moz-box-shadow: 0px 0px 2px #000000,  inset 0px 0px 1px #ffffff;   box-shadow:0px 0px 2px #000000, inset 0px 0px 1px #ffffff;   text-shadow: 3px 3px 7px #333333;  filter: dropshadow(color=#333333, offx=3, offy=3);}  .call_alert:active{ padding:5px 10px;  border:solid 1px #660000;  -webkit-border-radius:4px; -moz-border-radius:4px;  border-radius: 4px;  font:18px Arial, Helvetica, sans-serif;  font-weight:bold;  color:#ffffff;  background-color:#cc0000;  background-image: -moz-linear-gradient(top, #cc0000 0%, #660000 100%);  background-image: -webkit-linear-gradient(top, #cc0000 0%, #660000 100%);  background-image: -o-linear-gradient(top, #cc0000 0%, #660000 100%);  background-image: -ms-linear-gradient(top, #cc0000 0% ,#660000 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660000', endColorstr='#660000',GradientType=0 );  background-image: linear-gradient(top, #cc0000 0% ,#660000 100%);    -webkit-box-shadow:0px 0px 2px #000000, inset 0px 0px 1px #ffffff;  -moz-box-shadow: 0px 0px 2px #000000,  inset 0px 0px 1px #ffffff;   box-shadow:0px 0px 2px #000000, inset 0px 0px 1px #ffffff;   text-shadow: 3px 3px 7px #333333;  filter: dropshadow(color=#333333, offx=3, offy=3);}   /*МЕНЮ*/ul#css3menu1{	margin:0 0%;list-style:none;padding:0 0%;background-color:#dedede;font-size:0;width:100%;z-index:999;position:relative;display:inline-block;zoom:1;	*display:inline;*padding-right:1.04%;}ul#css3menu1 li{	display:block;white-space:nowrap;font-size:0;float:left;}* html ul#css3menu1 li a{	display:inline-block;}ul#css3menu1>li{	margin:0;width:16%;}ul#css3menu1 li.toplast{	width:20%;}body:first-of-type ul#css3menu1{	display:inline-table;border-spacing:0px 0;}body:first-of-type ul#css3menu1>li{	display:table-cell;float:none;}ul#css3menu1 a:active, ul#css3menu1 a:focus{	outline-style:none;}ul#css3menu1 a{	display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 14px Trebuchet MS;color:#444;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:5px;background-color:#c1c1c1;background-image:url("images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{	background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("images/mainbk.png");background-position:0 100px;text-decoration:none;}ul#css3menu1 li.topfirst>a{	border-radius:0px 0 0 0px;-moz-border-radius:0px 0 0 0px;-webkit-border-radius:0px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}ul#css3menu1 li.toplast>a{	border-radius:0 0px 0px 0;-moz-border-radius:0 0px 0px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;}ul#css3menu1>li:nth-child(1){width:13%}ul#css3menu1>li:nth-child(2){width:14%}ul#css3menu1>li:nth-child(3){width:14%}ul#css3menu1>li:nth-child(4){width:14%}ul#css3menu1>li:nth-child(5){width:25%}@-moz-document url-prefix(){body:first-of-type ul#css3menu1{display:inline-block} body:first-of-type ul#css3menu1>li{display:block;float:left !important;}}@media only screen and (max-width:579px),only screen and (max-device-width:579px){ul#css3menu1>li:nth-child(1){width:23%}ul#css3menu1>li:nth-child(2){width:26%}ul#css3menu1>li:nth-child(3){width:25%}ul#css3menu1>li:nth-child(4){width:26%}ul#css3menu1>li:nth-child(5){width:54%}ul#css3menu1>li:nth-child(6){width:46%}body:first-of-type ul#css3menu1{display:inline-block} body:first-of-type ul#css3menu1>li{display:block;float:left !important;}}@media only screen and (max-width:318px),only screen and (max-device-width:318px){ul#css3menu1>li:nth-child(1){width:31%}ul#css3menu1>li:nth-child(2){width:35%}ul#css3menu1>li:nth-child(3){width:34%}ul#css3menu1>li:nth-child(4){width:36%}ul#css3menu1>li:nth-child(5){width:64%}ul#css3menu1>li:nth-child(6){width:100%}}@media only screen and (max-width:237px),only screen and (max-device-width:237px){ul#css3menu1>li:nth-child(1){width:47%}ul#css3menu1>li:nth-child(2){width:53%}ul#css3menu1>li:nth-child(3){width:50%}ul#css3menu1>li:nth-child(4){width:50%}ul#css3menu1>li:nth-child(5){width:54%}ul#css3menu1>li:nth-child(6){width:46%}}@media only screen and (max-width:261px),only screen and (max-device-width:261px){ul#css3menu1>li:nth-child(1){width:47%}ul#css3menu1>li:nth-child(2){width:53%}ul#css3menu1>li:nth-child(3){width:50%}ul#css3menu1>li:nth-child(4){width:50%}ul#css3menu1>li:nth-child(5){width:100%}ul#css3menu1>li:nth-child(6){width:100%}}/*ШАПКА*/#header{width: 100%;/*Ширина*/height: 100%;/*Высота*/background: #fcfff4; /* Old browsers */background: -moz-linear-gradient(top,  #fcfff4 0%, #c4c4c4 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#c4c4c4)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #fcfff4 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #fcfff4 0%,#c4c4c4 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #fcfff4 0%,#c4c4c4 100%); /* IE10+ */background: linear-gradient(to bottom,  #fcfff4 0%,#c4c4c4 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */}/*Акция*/#akciya{background-image: url('images/flyer.jpg');background-repeat: no-repeat;width:500px;/*Ширина*/height:353px;/*Высота*/margin:1%;/* Отступы вокруг элемента */float: left;/* Обтекание по правому краю */}/*Ярлык - СПЕШИТЕ*/#tag{background-image: url('images/yarlyk.png');background-repeat: no-repeat;width:249px;/*Ширина*/height:95px;/*Высота*/margin:1%;/* Отступы вокруг элемента */float: left;/* Обтекание по правому краю */}/*Таймер*//*Контакты*//*Форма заказа*//*Контент*/#content{width: 90%;/*Ширина*/height:100%;/*Высота*/margin:10px auto;}/*Подвал*/footer{background: #333;font: 12pt Tahoma;width: 100%;/*Ширина*/height:30%;/*Высота*/padding: 0;margin:0;border-top: 2px solid #111; /* Параметры линии вверху */}
Edited by px379
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
iKNG Explorer

iKNG

Posted
Posted

Так когда указываете 100percent высоту для шапки, браузер понимает это как 100percent высота родителя, то есть растягивается на всю его высоту. Чтобы растянуть только на высоту контента внутри блока, надо добавить следующее:

#header:after {    clear: both;}

​И удалить 100percent высоту.

Link to comment
Share on other sites
  • 0
px379 Explorer

px379

Posted
  • Author
Posted

Так когда указываете 100percent высоту для шапки, браузер понимает это как 100percent высота родителя, то есть растягивается на всю его высоту. Чтобы растянуть только на высоту контента внутри блока, надо добавить следующее:

#header:after {    clear: both;}

​И удалить 100percent высоту.

При удалении height: 100; получается вот что (см. скрин). Шапка просто теряет высоту.

 

Screen_Shot00010.jpg

 

Или я чет не так сделал? Уже не первый час эту шапку мучаю, могу подтупливать.

/*ШАПКА*/#header{width: 100%;/*Ширина*/background: #fcfff4; /* Old browsers */background: -moz-linear-gradient(top,  #fcfff4 0%, #c4c4c4 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#c4c4c4)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #fcfff4 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #fcfff4 0%,#c4c4c4 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #fcfff4 0%,#c4c4c4 100%); /* IE10+ */background: linear-gradient(to bottom,  #fcfff4 0%,#c4c4c4 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */}#header:after {    clear: both;}
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept