разделы с полосами прокрутки в div с фиксированным размером

ProgramBox

разделы с полосами прокрутки в div с фиксированным размером

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

У меня в основном такой макет:

 <body>
    <div style="height: 150px; width: 200px; background: green">
      <div style="overflow: auto; max-height: 100px; background: blue">
        some content <br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
      <div style="overflow: auto; background: red">
        some more content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
    </div>
</body>

Теперь я хочу, чтобы второй div заполнял всю оставшуюся высоту родительского div и показывал полосу прокрутки, если требуется больше места. Как я могу этого добиться?
В настоящее время второй div никогда не показывает полосу прокрутки и просто использует необходимое пространство, даже если это превысит общую высоту родительского элемента…

Обновить:
Пожалуйста, протестируйте решение, которое вы предоставляете 🙂

1. Какие браузеры вам необходимо поддерживать? IE7? Только современные?

2. @thirtydot: IE7 — самый старый, который я должен поддерживать. Но если это невозможно, я мог бы подумать о том, чтобы просто игнорировать IE7 🙂

Ответ №1:

Использование Jquery может помочь

 <body>
<div style="height: 150px; width: 200px; background: green">
  <div id="c1" style="overflow: auto; max-height: 100px; background: blue">
    some content <br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div id="c2"style="overflow: auto; background: red">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

в document.ready добавьте это

  var h1=$('#c1').height();
var h2 = 150-h1;
$('#c2').height(h2);

Ответ №2:

Также задайте максимальную высоту для второго div

 <body>
<div style="height: 150px; width: 200px; background: green">
  <div style="overflow: auto; max-height: 100px; background: blue">
    some content <br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div style="overflow: auto; background: red; max-height: 50px">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

1. Это не помогает. Я хочу, чтобы второй div использовал все доступное пространство в родительском div. С этим параметром максимальной высоты он не будет использовать пространство первого div, если оно пустое.

2. В этом случае можно установить максимальную высоту в 150 пикселей для второго div

Ответ №3:

Я знаю только, как это сделать, используя готовящуюся модель макета flexbox. Вот как вы могли бы это сделать в текущих версиях Firefox:

 <div style="height: 150px; width: 200px; display: -moz-box; -moz-box-orient: vertical; background-color: green;">
  <div style="overflow: auto; min-height: 1px; max-height: 100px; background-color: blue;">
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div style="overflow: auto; min-height: 1px; -moz-box-flex: 1; background-color: red;">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

Ответ №4:

Если вы установите overflow-y: scroll; и height: auto; для дочернего элемента, вы сможете добиться эффекта полосы прокрутки, не превышая родительский элемент

Ответ №5:

Я не думаю, что есть способ сделать это гибко, но это возможно, если вы можете знать / установить высоту исходного div, а затем следующих двух разделов.

Вот что я придумал:

 <body>
    <div style="height:200px; width: 200px; background: green;">
      <div style="overflow: auto; max-height: 100px; background: blue">
        some content <br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
      <div style="overflow: auto; background: red; min-height:100px; max-height:100px;">
        some more content<br/>
        some content<br/>
        some more content<br/>
        some content<br/>
      </div>
    </div>
</body>

Если исходный div является 200px , а затем первый дочерний div является 100px , оставшееся пространство второго дочернего div будет 100px . Итак, если вы установите для min-height and max-height каждого значение 100px , то div заполнит оставшееся пространство и отобразит полосу прокрутки, если содержимое больше max-height .

Я уверен, что вы хотели получить ответ, который был бы гибким, в зависимости от размера исходного родительского div, но я не думаю, что в данном случае это так просто.

1. Основная проблема вашего подхода заключается не в том, что он не выводит высоту из родительского элемента, а в том, что он работает не так, как я хочу! Второй div не использует все доступное пространство внутри своего родительского элемента.

2. Как это не так? Если родительский div равен 200px, первый дочерний div равен 100px, тогда второй дочерний div будет использовать оставшиеся 100px.

3. Второй div будет использовать максимум 100 пикселей, независимо от высоты первого div. Даже если это имеет высоту 0, потому что оно пустое… Вот почему первый div имеет max-height , а не height .

4. Да, я сказал это в своем ответе. Я не думаю, что есть способ сделать это в чистом CSS, особенно в том, что является кроссбраузерным.