Два смежных DIV с динамическим контентом.Один перенос содержимого, другой переполнение прокрутки - PullRequest
Новая
       9

Два смежных DIV с динамическим контентом.Один перенос содержимого, другой переполнение прокрутки

0 голосов
/ 12 декабря 2018

Я должен показать 2 соседних поля, оба имеют динамическое содержимое (отображается с использованием угловых).Container должен иметь высоту Box1.Высота Box2 s может варьироваться в зависимости от динамичности и не должна быть выше, чем Box1.Если выше, нужно показать прокрутку.

Я начал со следующего кода с использованием таблиц: 

<table id="Container">
    <tr>
        <td valign="top" id="Box1">
            <dynamic rendered html code/>
        <td>
        <td>&nbsp;<td>
        <td valign="top" style="position: relative; id="Box2">
            <div style="position: absolute; top:0; bottom:0; overflow-x: hidden">
                <dynamic rendered html code/>
            </div>
        <td>
    </tr>
</table>

К сожалению, он не работает в IE, поскольку (как я читал в Интернете) позиция не определена для таблиц (не соответствует стандарту HTML);

Поэтому я решил переключиться на div: 

<div id="Container">
    <div style="display: inline-block; vertical-align:top" id="Box1">
        <dynamic rendered html code/>
    <div>
    <div style="display: inline-block;">&nbsp;<div>
    <div style="display: inline-block; vertical-align:top" id="Box2">
        <dynamic rendered html code/>
    <div>
</div>

Box1 всегда должен переносить содержимое,Box2 не должен быть выше, чем Box1, ЕСЛИ затем переполнение прокрутки.Возможно ли это в CSS?Нет JQuery и нет Javascript.

1 Ответ

0 голосов
/ 12 декабря 2018

Я полагаю, что вы хотите, чтобы высота #Box2 была равна высоте #Box1.

Невозможно выровнять высоту внутри одного и того же родителя.Поэтому я предлагаю вам обернуть #Box2 с помощью #Box1, как показано ниже. 

<div id="Box1">
    <div id="Box2">
    </div>
</div>

И вы можете установить max-height: 100%; на #Box2, чтобы максимальная высота #Box2 не былабольше чем #Box1.

Добавление overflow-x: auto; к #Box2 может автоматически отображать полосу прокрутки при переполнении текста.

https://codepen.io/blackcityhenry/pen/LMVoZd

...