div(display: table-row) в контейнере div(display: table) не соблюдает width:100%, то есть ширина контейнера “теряется”

449

09 ноября 2017, 04:56

Стоит задача: сверстать прямоугольник 300x200px, верх которого (green) имеет неизвестную высоту (по высоте контента), а основная область (blue) занимает всю оставшуюся область прямоугольника и по ширину и по высоте.
При этом контент основной области может быть большим и в ширину и в высоту, поэтому основная область (именно она, а не весь прямоугольник!) должна иметь 2 скроллбара (по необходимости).

Так должно выглядеть:

Погуглив по теме "div fill remaining height", бодро приступил решать задачу, сделав контейнер display:table, основную область - display:table-row с height:auto, а в ней - еще один div с height:100%:

<div style="background-color: red; display: table; width: 300px; height: 200px;"> 
 
  <div style="background-color: green; display: table-row; height: 0;"> 
    Lorem ipsum 
  </div> 
 
  <div style="background-color: blue; width: auto; display: table-row; height: auto;"> 
    <div style="height: 100%; width: 100%; overflow-y: auto;"> 
      11111111111111111111111111111111111111111111111111111111111111111111111111<br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 11 
      <br> 
    </div> 
  </div> 
 
</div>

По части height все отлично.

Чего не сказать о width. Которая, как ясно по скриншоту, выходит отнюдь не равной 300px. Прямоугольник тупо растягивается по ширине.

Оказывается, div(display:table-row) абсолютно плевать на width:100% как в ее подопечном div, так и если задать его и ей самой.

Хотя, если фиксированно задать 300px подопечному, а div(display:table-row) оставить height:auto, то это он понимает.

Но вся это верстка - не одноразовое решение где-то там, а гибкая вещь на века, поэтому мне не подходит вариант задавать height/width где-то еще, кроме как в контейнере. И JS для этого не предлагать - он здесь костыль.

В голове крутится, что основную область нужно заключить еще в один контейнер. Еще в голове крутится table-cell. Но что-как-куда - ума не приложу.

Пробовал всяко, но ничего нового так и не достиг.

Answer 1

Оно?

.container { 
display: block; 
position: relative; 
width: 300px; 
height: 200px; 
} 
.wrp { 
display: block; 
position: relative; 
width: 300px; 
height: 100%; 
} 
.green { 
display: block; 
position: relative; 
width: 300px; 
background: green; 
} 
.blue { 
display: block; 
position: relative; 
width: 300px; 
height: 100%; 
background: blue; 
overflow-x: auto; 
overflow-y: scroll; 
}

<div class="container"> 
<div class="wrp"> 
<div class="green">Lorem ipsum</div> 
<div class="blue"> 
11111111111111111111111111111111111111111111111111111111111111111111111111<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
11<br> 
</div> 
</div> 
</div>

Answer 2

Вот такое решение было мною создано на базе кода из сети.

Работает совершенно корректно (современный Chromium, Safari на OS X, IE10, Samsung Internet на Android 6.0, "Интернет" на Android 4.2).

Также и если задать width и/или height в процентах.

Но, если не задавать height совсем, то работает некорректно - видно только Lorem ipsum с краями, обрезанными по его размеру. Приходится убирать этот самый position:absolute. Мне это не нравится, т.к. компонент будет использоваться в обоих режимах и получается нужен JS-костыль.

А еще, если не задавать width, то ширина будет соответствовать отнюдь не контенту основной области - а ширине Lorem Ipsum. Костыль-лечение - опять же отключение position:absolute.

Хотелось бы решить и эти проблемы...

<div style="background-color: red; display: table; width: 300px; height: 200px;"> 
 
  <div style="background-color: green; display: table-row; height: 0;"> 
    Lorem ipsum 
  </div> 
 
  <div style="background-color: blue; width: auto; display: table-row; height: auto;"> 
    <div style="height: 100%; width: 100%; overflow-y: auto; position: relative;"> 
      <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"> 
        11111111111111111111111111111111111111111111111111111111111111111111111111<br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 11 
        <br> 
      </div> 
    </div> 
  </div> 
 
</div>

Answer 3

Предлагаю использовать flex:

<div style="display: flex; flex-direction: column; width: 300px; height: 200px;"> 
  <div style="background: green; flex: 0 0 auto;"> 
    Lorem ipsum 
  </div> 
 
  <div style="background: blue; flex: 1 1 auto; overflow: auto;"> 
    11111111111111111111111111111111111111111111111111111111111111111111111111<br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 11 
    <br> 
  </div> 
</div>