Растяните один или два divs на весь td с CSS

Question

У меня есть сгенерированный сервлет HTML, который имеет таблицу и один или два div в зависимости от конфигурации. Вот краткий пример:

table { 
 
    table-layout: fixed; 
 
} 
 
td.td-div { 
 
    width: 80%; 
 
} 
 
td.td-text { 
 
    background-color: #faf0ff; 
 
    width: 20%; 
 
} 
 
div#outer { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #f0fffa; 
 
    display: inline-block; 
 
} 
 
div.div-first, div.div-second { 
 
    background-color: #ccc; 
 
    margin: .1em 0 .1em 0; 
 
    padding: 0; 
 
    width: 100%; 
 
}

<table> 
 
    <tr> 
 
     <td class="td-div"> 
 
      <div id="outer"> 
 
       <div class="div-first">first div</div> 
 
       <div class="div-second">Second div</div> 
 
      </div> 
 
     </td> 
 
     <td class="td-text">It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space.</td> 
 
    </tr> 
 
</table>

Проблема заключается в том, что мне нужно, что дивы, чтобы заполнить всю Т.Д., независимо от того, если есть только один или оба из них. Можно ли распространять первый и второй divs (или просто растянуть первый div, если нет второй) в ячейку только с CSS?

Обновление: Мне нужны эти divs («first div» и «second div»), чтобы быть 100% -ной шириной ячейки и 50% высоты ячейки при их наличии и 100-процентной высотой, когда есть только один.

Обновление: Число разделов может быть динамическим.

Answer 1

Решение использует комбинацию CSS display:table и display:table-row, это также необходимо установить height:100% на контейнере <table>.

JsFiddle Demo

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.td-div { 
 
    width: 80%; 
 
} 
 
.td-text { 
 
    background: yellow; 
 
    width: 20%; 
 
} 
 
#outer { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.div-first, .div-second { 
 
    display: table-row; 
 
    background: aqua; 
 
} 
 
.div-second { 
 
    background: teal; 
 
}

<table> 
 
    <tr> 
 
     <td class="td-div"> 
 
      <div id="outer"> 
 
       <div class="div-first">first div</div> 
 
       <div class="div-second">Second div</div> 
 
      </div> 
 
     </td> 
 
     <td class="td-text">It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space.</td> 
 
    </tr> 
 
</table> 
 

 
<br/> 
 

 
<table> 
 
    <tr> 
 
     <td class="td-div"> 
 
      <div id="outer"> 
 
       <div class="div-first">only div</div> 
 
      </div> 
 
     </td> 
 
     <td class="td-text">It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space.</td> 
 
    </tr> 
 
</table>

Edit: выше решение, кажется, не работать должным образом на IE, здесь JQuery запасной вариант для него.

$('table').each(function() { 
    var h = $(this).height(); 
    $('#outer', this).css('height', h); 
}); 

Updated JsFiddle

Answer 2

Если вы можете использовать flexbox в вашем проекте вы могли бы, вероятно, сделать что-то вроде этого:

CSS

td.td-div 
{ 
    width: 80%; 
    position:relative; /*added*/ 
} 

div#outer 
{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    background: #f0fffa; 
    display: flex; /*added*/ 
    flex-direction:column; /*added*/ 
    position:absolute; /*added*/ 
    top:0; /*added*/ 
} 
div.div-first, 
div.div-second 
{ 
    background-color: #ccc; 
    margin: .1em 0 .1em 0; 
    padding: 0; 
    width: 100%; 
    height:100%; /*added*/ 
} 

Смотрите эту Fiddle для демонстрации. Удалите div-second и нажмите Run in the Fiddle, и вы увидите, что первый div займет весь тд или добавит третий div и увидит, что он заполняет все пространство равномерно.

UPDATE

Чтобы добиться чего-то для старых браузеров (смотрит на вас IE) вы можете использовать JavaScript, как это (Jquery):

$(function(){ 
    var h = $('table').height()/$('div#outer').children().length; 
    $('div#outer > div').height(h); 
}); 

Answer 3

Попробуйте это:

div#container { 
    padding:20px; 
    background:#F1F1F1 
} 
.content { 
    width:150px; 
    background:#ddd; 
    padding:10px; 
    display:table-cell; 
    vertical-align:top; 
} 
.text { 
    font-family: 12px Tahoma, Geneva, sans-serif; 
    color:#555; 
} 

Также: http://jsfiddle.net/atk71stg/1/ В скрипке вам может потребоваться потянуть разделитель влево, чтобы изменить размер w indow, чтобы все выглядело правильно.

Это использует стиль отображения «flex». Я не уверен, что это именно то, что вы ищете, но может быть.

Вот еще немного информации о гибком стиле дисплея: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

<script> 
 
function spanHeight(selectors, parents) { 
 
    var $parents, $selectors; 
 

 
    $parents = $(parents); 
 
    $selectors = $parents.find(selectors); 
 

 
    $selectors.css({ 
 
    height: (100/$selectors.length + '%') 
 
    }); 
 
} 
 

 
spanHeight('.inner', '#outer'); 
 
</script>

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    border: 1px solid red; 
 
} 
 
.td-div { 
 
    width: 80%; 
 
    position: relative; 
 
    vertical-align: top; 
 
} 
 
.td-text { 
 
    background: yellow; 
 
    width: 20%; 
 
} 
 
#outer { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top; 
 
    0; 
 
    bottom: 0; 
 
} 
 
.div-first, 
 
.div-second { 
 
    background: aqua; 
 
} 
 
.div-second { 
 
    background: teal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="td-div"> 
 
     <div id="outer"> 
 
     <div class="inner div-first"> 
 
      first div 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td class="td-text"> 
 
     It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty 
 
     space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill 
 
     this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. 
 
    </td> 
 
    </tr> 
 
    </table