Как заставить плавающий <div>использовать его максимальную ширину

Question

У меня есть простой макет с плавающим содержимым слева и меню с фиксированным расположением справа. Это хорошо работает для любой из моих страниц, у которых достаточно содержимого в div 'content', чтобы div увеличивалось до максимальной ширины. Однако у меня есть пара страниц, у которых недостаточно текста, чтобы div увеличился до максимального размера.

HTML:

<div id="frame">
    <div id="content">
        <p>Content goes here</p>
    </div>
    <div id="menu">
        <p>Menu goes here</p>
    </div>
</div>

CSS:

#frame {
    position: absolute;
    border:2px solid red;
}

#content {
    border:1px dashed red;
    float:left;
    margin-right:15em;
}

#menu {
    position:fixed;
    border:1px dotted blue;
    right:0;
    width:13em;
}

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

Answer 1

почему бы вам не открыть меню? это скорее будет фиксированный размер.

ответ на комментарий:

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

Хорошо, не уверен, что это лучший способ сделать это, но в основном маржа становится жертвой правила объединения маржи. Кажется, что работает padding.

#frame { position:absolute; padding-right:15em }
#content { }
#menu { position: fixed; right:0; width:13em }

Answer 2

Спасибо всем за ваши предложения, они указали мне в правильном направлении. На самом деле все оказалось проще, чем я думал. Я удалил float:left и position: absolute. Следующий CSS достигает именно того, чего я хочу:

Новый CSS:

#frame {
    border:2px solid red;
}

#content {
    border:1px dashed red;
    margin-right:15em;
}

#menu {
    position:fixed;
    border:1px dotted blue;
    right:0;
    top: 1em;
    width:13em;
}

Каким-то образом в процессе моих разных комбинаций position: absolute; попал в мой #frame селектор, и он отбрасывал вещи.

Выше указано следующее:

• Фиксированное меню положения и ширины справа
• Содержимое div слева, которое использует оставшуюся ширину
• Content div использует полную ширину, даже если текст не заполнен

Это не учитывает отсутствие работоспособности IE6 position: fixed;, о котором говорилось выше, но я могу использовать взломанный селектор IE6, чтобы сделать альтернативу этому.

Answer 3

• Ширина содержимого в% (неявная)
• ширина и поле меню основаны на em

Поскольку css не допускает такие вещи, как width: 100% -17em, чтобы получить желаемое поведение (без использования js), используйте также% -значения для меню. Однако это будет увеличивать / уменьшать ваше меню и его поля в зависимости от размера окна ...

#content {
    border:1px dashed red;
    float:left;
    margin-right:2%;
    width: 78%;

}

#menu {
    position:fixed;
    border:1px dotted blue;
    right:0;
    width:20%;
}

Надеюсь, это поможет.

Answer 4

Удалить float: left & mdash; так как у вас нет содержимого после div, которое вы хотите разместить рядом с ним (так как это содержимое position: fixed), вам не нужен float (или связанная с ним упаковка в термоусадочную пленку).

Вам нужно беспокоиться только о MSIE6 (который не поддерживает position: fixed), но вы можете решить эту проблему, установив position:a absolute на #menu в MSIE6 (используя условные комментарии или CSS-хак).

Answer 5

Это свойство CSS, называемое min-width. Это предотвратит минимальную ширину объекта. IE не поддерживает это, но есть JS-хаки , чтобы гарантировать это.