Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.10.2014, 14:47
Интересующийся
Отправить личное сообщение для TheDude Посмотреть профиль Найти все сообщения от TheDude
 
Регистрация: 24.05.2014
Сообщений: 25

Абсолютный блок на весь экран
Здравствуйте. В моем случае получается, что левый блок col1 имеет высоту 100% относительно блока layout (он же не растягивается вместе с контентом вниз до конца, веря firebug-у), как нибудь можно сделать, чтобы левый блок растягивался относительно блока с контентом вниз до конца?
<div class="header">Шапка сайта</div>
  <div class="layout">
   <div class="col1">Колонка 1</div>
   <div class="col2">Колонка 2</div>
   <div class="col3">Колонка 3</div>
  </div>


.header { }
.layout { position: relative; height: 100%;  }
.col1 {  width: 250px;  position: absolute; background-color: red; height: 100%; bottom: 0; top: 0;}
.col2 {  left: 250px; right: 250px;  position: absolute; }
.col3 { width: 250px; right: 0;  position: absolute;}
Ответить с цитированием
  #2 (permalink)  
Старый 25.10.2014, 23:02
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

не понял что требуется
добавляй [html run height=500]
Ответить с цитированием
  #3 (permalink)  
Старый 25.10.2014, 23:18
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,501

Неа, layout не растягивается.
<style>
.header { }
.layout { position: relative; height: 100%;  }
.col1 {  width: 250px;  position: absolute; background-color: red; height: 100%; bottom: 0; top: 0;}
.col2 {  left: 250px; right: 250px;  position: absolute; }
.col3 { width: 250px; right: 0;  position: absolute;}
</style>
<div class="header">Шапка сайта</div>
  <div class="layout" style="border:2px solid #00f">
   <div class="col1">Колонка 1</div>
   <div class="col2">Колонка 2</div>
   <div class="col3">Колонка 3
    <div style="height:1000px;background:#ddf"></div>
   </div>
  </div>
</div>
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 26.10.2014, 12:57
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Aetae
Неа, layout не растягивается.
Не нужно указывать высоту, если указали top и bottom (исторический факт: в IE7 это не сработает)
Процентная высота работает только когда у родителя задана высота. Причем для родителя это условие тоже должно выполняться. То есть у всех предков должна быть указана высота.
В данном случае у body высота не указана, так что для .layout height не будет работать. Чтобы работала, нужно указать высоту для body и для html
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разворот блока с флеш игрой на весь экран LeXA86 Работа 2 05.09.2014 10:52
картинка во весь экран cha0s (X)HTML/CSS 4 23.07.2014 19:08
Тень на весь экран Gamestop Общие вопросы Javascript 1 08.02.2012 23:33
GRID во весь экран burashka ExtJS 6 09.09.2010 13:05
растянуть див на весь экран GooD][Man Общие вопросы Javascript 0 23.01.2010 16:07