Div Установить для заполнения в одном направлении и иметь одну фиксированную сторону? - PullRequest
Новая
       40

Div Установить для заполнения в одном направлении и иметь одну фиксированную сторону?

0 голосов
/ 06 июля 2018

Я создаю приложения в этом интерфейсе, который включает в себя div, размер которого можно изменить. У меня есть этот (клиенты), чтобы открыть в размере содержимого с помощью установки высоты и ширины по умолчанию. Таблицы справа извлекают много информации из запроса. Несколько раздражает прокрутка в маленьком меню из стороны в сторону. С левой стороны все в порядке, и текстовые вводы могут остаться прежними. Я хочу, чтобы левая сторона оставалась неизменной (всегда), а левая сторона правой стороны всегда была заподлицо.

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

Итак, сообщество, каков наилучший способ сохранить левую сторону этого деления выровненной с фиксированной левой половиной, при этом настраивая правую сторону так, чтобы она заполнялась только вправо?

enter image description here Вот ссылка на изображение

1 Ответ

0 голосов
/ 13 июля 2018

Я понял это. Хитрость заключалась в том, чтобы установить 2 больших делителя на display:table-cell и установить левый фиксированной ширины. Правый остается выровненным и заполняет контейнер. Затем вы можете сделать div внутри div ячейки таблицы, который будет иметь правильный размер. 

#thisland {
    display: table;
    width: 100%;
    height:100%;
    min-height:800px;
    min-width: 800px;
    position: absolute;
}
#westsyde, #eastsyde {
    display: table-cell;
}
#westsyde {
    border:1px solid black;
    width: 350px;
    position: relative;
    height:100%;
}
#eastsyde {
    border:1px solid white;
    position: relative;
    height:100%;
}

HTML будет выглядеть следующим образом, поэтому #eastsyde заполняет справа #thisland

<div id="thisland>
   <div id="westsyde"></div>
   <div id="eastsyde"></div>
</div>
...