Как сделать div заполнить оставшееся горизонтальное пространство

0

У меня есть два div. Один, который плавает влево и один плавает вправо. Одна из левых имеет ширину, равную 18%, и минимальную ширину 217 пикселей. Я хочу, чтобы div справа занимал оставшееся пространство, а также имел возможность изменять размер в соответствии с окном.

Проблема, с которой я сталкиваюсь, заключается в том, что я могу установить правую ширину div на 82% и плавать вправо, которая работает, пока я не сделаю слишком маленькую сторону окна, и в этом случае минимальная ширина левого div начнет и перестанет сокращаться, В правом div нет достаточного пространства для размещения, поэтому он сдвигается вниз.

Вот пример кода.

HTML

    <div id="div1">
       stuff inside of it
    </div>
    <div id="div2">
       stuff inside of it
    </div>

CSS

    #div1
    {
     float: left;
     width: 18%;
     height: 100vh;
     min-width: 130px;
     box-shadow: 0px .3em .2em #000;
     z-index: 2;
    }

    #div2
    {
     width: 82%;
     float: right;
     z-index: 1;
    }

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

  • 1
    Так что же вы хотите сделать? Если вы не хотите использовать min-width , удалите ее. Браузер не может размещать элементы div рядом друг с другом, которые не помещаются на уменьшающемся экране. Кроме того, не рассматривайте использование таблиц для этого, это подход 1999 года.
  • 0
    Именно то, что сказал Арман Х. Что вы могли бы сделать, так это добавить минимальную ширину к div2, чтобы у него было что добавить, если вам когда-либо понадобилось уменьшить первое до 130px, чтобы ему никогда не приходилось сталкиваться с ситуацией, когда ему нужно перейти под div1, потому что текст внутри не подходит.
Показать ещё 3 комментария
Теги:

2 ответа

1
Лучший ответ

Вы также можете содержать поплавки с overflow:hidden:

#div2{
  overflow:hidden;
  z-index: 1;
}

DIV заполнит оставшееся пространство (http://jsfiddle.net/MAjwt/)

Поделиться
  • 0
    Огромное спасибо!! Решение очень простое и элегантное! Один вопрос, однако, будет ли установка «переполнения: авто» отличаться от «переполнения: скрыто»?
  • 0
    Это зависит от того, какой контент у div. auto также предотвращает переход ниже, но вы можете увидеть полосы прокрутки, если текст внутри не помещается. Пример - jsfiddle.net/sMJ32 (добавление переноса word-wrap: break-word хотя это можно исправить с помощью word-wrap: break-word )
2

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

Вот почему CSS реализовал набор правил стиля, построенных с учетом этих уникальных свойств. Вы можете установить контейнер вокруг двух элементов со стилем display: table; , а затем дайте ему детям стиль display: table-cell;

Установка ширины для правой части div на 100% гарантирует, что она всегда заполняет столько места, сколько доступно для нее.

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

Вот пример использования вашего кода:

http://jsfiddle.net/Q5rjL/

Свойства отображения таблицы CSS дают вам все преимущества этих уникальных элементов, но без семантических проблем. Они отлично подходят для сложных макетов, где другие типы отображения стиля не подходят.

Поделиться
  • 0
    Спасибо за ответ! Я не мог заставить ваше решение работать с моим кодом, несмотря на jsfiddle. Ваш ответ очень ценится, хотя!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню