Вложенный div высотой 100%

Тыр-тыр

Шалом! Не получается сделать вложенный див высотой 100%. Может кто покажет решение задачи?Привожу пример решения задачи с помощью таблицы:
<html>
  <head>
    <title></title>
  </head>
 
  <body>
 
  <table height="100%" width="80%" border="1">
  <tr>
  <td>1</td><td>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br></td>
  </tr>
  </table>
  
</html>
А вот дивом так сделать не получается. Вот только могу сделать внешний див с такими качествами, а внутренний не получается сделать. Прошу школоту (которая не знает что такое высота 100% - а таких оказывается много!) не писать тут всякую фигню.
<html>
  <head>
    <title></title>
    
    <style>
    html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.cabinet_wrapper {
    background: #EEE;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
        padding: 0 20px 0 20px;
    margin: auto;
    width: 900px;
    min-height: 100%;
}
    </style>
    
  </head>
 
  <body>
<div class="cabinet_wrapper">Text</div>
 
</body>
</html>
13 ответов

Тыр-тыр

<div class="cabinet_wrapper">
  <div class="inner">text</div>
</div>
 html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.cabinet_wrapper {
    background: #EEE;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 0 20px 0 20px;
    margin: auto;
    width: 900px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}
.inner{
   -webkit-box-flex: 1;
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
}


Тыр-тыр

vovandr, большое спасибо! К сожалению этот вариант некошерен Например, в IE9 он не работает (а пользователей этого и ранних версий браузера ещё огромная туча).


Тыр-тыр

К сожалению этот вариант некошерен Например, в IE9 он не работает
Если вам нужнен фолбэк, то используя modernizr можно определить поддержку flexbox и написать js для старых браузеров Как раз этот вариант самый кашерный и скоро вы это поймете


Тыр-тыр

Возможно вы правы 100%. Но в данном случае это не является полноценной альтернативой решения таблицей с простым указанием height=100%. Неужели с дивом нет такого простого и кроссбраузерного решения И если такого решения нет, то буду юзать А так хотелось div


Тыр-тыр

Неужели с дивом нет такого простого и кроссбраузерного решения
Только абсолютное позиционирование. То есть внешнему relative, а внутреннему top: 0, left: 0, right: 0, bottom: 0 и position: absolute. Это везде будет работать, но опять же этот контейнер будет вне потока. Я не знаю контекста задачи, так что возможно этот способ вам подойдет...


Тыр-тыр

Я не знаю контекста задачи
Большое вам спасибо за реальную и эффективную помощь (без лишних бла-бла-бла, философии и демагогии). Я сам не селён с CSS (хоть и давно пользуюсь), у меня старая школа HTML - с конца прошлого века (1998 ...). А задача у меня простая, собственно изначально таблицей я и показал. Слева блок меню, а справа блок для контента. Высота блока меню и блока контента должна быть всегда одинаковой, 100%. Вот более внятный код:
<html>
  <head>
    <title></title>
  </head>
 
  <body>
 
  <table height="100%" width="100%" border="0" cellpadding="29px">
  <tr valign="top">
  <td nowrap bgcolor="gray" style="border-left: solid 3px black">
  
  <ul>
  <li>Navigation link</li>
  <li>Navigation link</li>
  <li>Navigation link</li>
  <li>Navigation link</li>
  <li>Navigation link</li>
  <li>Navigation link</li>
  </ul>
  
  </td><td width="100%" bgcolor="lightgray" style="border-right: solid 3px black">Content</td>
  </tr>
  </table>
  
</html>


Тыр-тыр

Тыр-тыр я бы сделал так: (js для старых браузеров писал вслепую но вроде все верно, проверить возможность сейчас нет) - главное подключить modernizr:
<div class="wrap">
  <nav class="col-1-4 nav equal">  
   <ul>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>
    <li>Navigation link</li>  
   </ul>
  </nav>
  <div class="col-3-4 content equal">
    <article class="article">
       <h1>Заголовок</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus ***** iste, officia sapiente eum voluptatum debitis a assumenda! Consectetur, reiciendis!</p>
    </article>
  </div>
</div>
html,body{
  padding: 0;
  margin: 0;
}
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wrap{
  width: 80%;
  margin: 0 auto;
}
.wrap:after{
  content: '';
  display: table;
  clear: both;
}
[class*="col-"]{
  padding: 10px;
  float: left;
}
.col-1-4{
  width: 25%;
}
.col-3-4{
  width: 75%;
}
.nav{
  background: lightgrey;
}
.content{
  background: #8a8a8a;
}
.flexbox .equal{ 
  float: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flexbox .wrap{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.no-flexbox .equal{float: left;}
function setEqualColumns() {
  
  var cols = document.querySelectorAll('.equal'),
      maxHeight = 0;
  
  for(var i = 0, len = cols.length; i < len; i++) {
     var itemCol = cols[i],
         itemHeight = itemCol.offsetHeight;
     
     if(itemHeight >= maxHeight) {
        maxHeight = itemHeight;
     }
  
     itemCol.style.height = maxHeight + 'px';
  } 
 
}  
 
window.onload = function() {
  
  if(!Modernizr.flexbox){
    setEqualColumns();
  } 
  
};
Демо можно глянуть тут: http://codepen.io/anon/pen/ymcJwКстати, вот тот способ про который я говорил с позиционированием: (html токой же)
html,body{
  padding: 0;
  margin: 0;
}
.wrap{
  width: 80%;
  margin: 0 auto;
  position: relative;
  display: table;
}
.col-1-4{
  width: 25%;
}
.col-3-4{
  width: 75%;
}
.nav{
  background: lightgrey;
}
.content{
  background: #8a8a8a;
}
.equal{
  display: table-cell;
  position: relative;
  padding: 10px;
}
.article{
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}
Можно конечно еще кучу вариантов продемонстрировать, есть интересный метод Сергея Чикуёнка c относительно позиционированными блоками, но там и разметка существенно усложняется


Тыр-тыр

Спасибо! Но оба варианта не работают. Они не 100% высоты страницы Открывал в Хроме.


Тыр-тыр

Ага упустил один момент) приеду вечером сделаю. Вы пока для тренировки можете сами подумать как это реализовать очень простоC flexbox:
html,body{
  padding: 0;
  margin: 0;
  height: 100%;
}
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wrap{
  width: 80%;
  margin: 0 auto;
}
.wrap:after{
  content: '';
  display: table;
  clear: both;
}
[class*="col-"]{
  padding: 10px;
  float: left;
}
.col-1-4{
  width: 25%;
}
.col-3-4{
  width: 75%;
}
.nav{
  background: lightgrey;
}
.content{
  background: #8a8a8a;
}
.flexbox .equal{
  float: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flexbox .wrap{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.no-flexbox .equal{float: left;}
function setEqualColumns() {
  
  var cols = document.querySelectorAll('.equal'),
      maxHeight = 0;
  
  for(var i = 0, len = cols.length; i < len; i+) {
     var itemCol = cols[i],
         itemHeight = itemCol.offsetHeight;
     
     if(itemHeight >= maxHeight) {
        maxHeight = itemHeight;
     }
  
     itemCol.style.height = maxHeight + 'px';
  } 
 
} 
 
window.onload = function() {
  
  if(!Modernizr.flexbox){
    setEqualColumns();
  }
  
};
С позициоированием:
html,body{
  padding: 0;
  margin: 0;
  height: 100%;
}
.wrap{
  width: 80%;
  margin: 0 auto;
  position: relative;
  display: table;
  height: 100%;
}
.col-1-4{
  width: 25%;
}
.col-3-4{
  width: 75%;
}
.nav{
  background: lightgrey;
}
.content{
  background: #8a8a8a;
}
.equal{
  display: table-cell;
  position: relative;
  padding: 10px;
}
.article{
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}


Тыр-тыр

Спасибо! Смущает table-cell - вроде не поддерживается в IE6-7. Да и не работает вариант с позиционированием - если контента много, то он выходит за границу низа:Откровенно говоря решение с таблицей мне до сих пор представляется самым надёжным и простым.


Тыр-тыр

Да и первый вариант с flexbox не работает у меня.


Тыр-тыр

Да и первый вариант с flexbox не работает у меня.
http://codepen.io/anon/pen/atnAL
Смущает table-cell - вроде не поддерживается в IE6-7.
Я думаю эти 2 браузера нынче поддерживают только динозавры табличной верстки)))
Да и не работает вариант с позиционированием - если контента много, то он выходит за границу низа:
Я вам сразу сказал, что это решение с позиционированием от задачи зависит конкретной. Если фон был бы однородной прошел бы вариант с bg fixed, а так как вам нужна 100% высота, то html обрезает весь контент


Тыр-тыр

vovandr, большое спасибо! Вы - лучший! Всё чётко и по существу. Не пытались меня лечить и философствовать как некоторые на некоторых форумах. Извиняюсь, что задержался с ответом - меня эта тема/проблема уже так достала, что я на неё почти плюнул