0

Стоит задача: сверстать прямоугольник 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. Но что-как-куда - ума не приложу.

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

5
  • смотри в сторону flex... мой тебе совет
    – Air
    6 ноя 2017 в 19:32
  • @Air я перфекционист, а он никак не работает в старых. ну его. 6 ноя 2017 в 19:57
  • @Air он никак не работает в старых. ну его. 6 ноя 2017 в 20:12
  • @Air в другой раз. в этот без flex 6 ноя 2017 в 20:40
  • @Air и да, 21 век начался с 2000 года, а не с 2010 :) 7 ноя 2017 в 0:05

3 ответа 3

0

Оно?

.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>

5
  • НЕТ, ЗДЕСЬ ОШИБКА. Высота всего контейнера получается не 200px, а 200 + высота green. Я сам только что додумался до решения, которое, оказывается, было идентичным этому (не сразу узнал), но из-за той же ошибки выкинул его в корзину. 6 ноя 2017 в 21:19
  • приведи пример своего ответа, что ты там надумал, интересно...
    – Air
    6 ноя 2017 в 22:07
  • @Air да в принципе то же самое, что и в ответе этого чела. хотя, я тут еще нашел код, являющийся доработкой моего первого варианта (из вопроса (с display:table)), и он решает мою проблему, так что я изучу его сейчас, перепишу, дам себе ответ и признаю свой ответ решением своего вопроса, а себя молодцом ^_^ а флекс гори в аду 6 ноя 2017 в 22:22
  • @LADYX Чего "считайте"? Я копирую код к себе в файлик html, открываю новейшим хромом, делаю скриншот, вставляю в MS Paint и меряю... Ширина 300, высота 220 примерно. 7 ноя 2017 в 9:43
  • @LADYX нет это не полоса прокрутки, во-первых по ширине такого нет, во-вторых я пробовал делать green выше (3 строчки) и вырастает именно на этот размер, а не на размер полосы. и да, полоса впрочем должна быть включена в размер. 7 ноя 2017 в 10:18
0

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

Работает совершенно корректно (современный 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>

0

Предлагаю использовать 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>

1
  • Лучше, чем мое решение на display:table, но все равно не идеально. Если убрать width (или width и height), то ширина будет 100%, а надо бы чтобы в таком случае она делалась по размеру контента, как и высота (с высотой порядок). Этот компонент будет работать в обоих режимах. 7 ноя 2017 в 18:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.