Переполнение CSS: скрытые ограничения ширины div - PullRequest
Новая
       7

Переполнение CSS: скрытые ограничения ширины div

1 голос
/ 27 января 2011

Итак, я столкнулся с этой проблемой, когда переполнение: скрытый элемент div в контейнере ограничит ширину элемента div, когда он должен быть текучим. Так что в основном у меня есть структура, похожая на эту: 

<div id="container">
    <div id="leftColumn">
        //content
    </div>
    <div id="rightColumn">
        //content
    </div>
</div>

В этой ситуации divColumn div имеет фиксированную ширину, а rightColumn должен быть жидким и заполнять оставшуюся ширину. Проблема в том, что когда я добавляю переполнение: скрытый в rightColumn (у него есть цвет фона), ширина уменьшается до минимальной ширины, которую я ему дал. Есть ли способ заставить его расширяться до оставшейся ширины пространства? Вот что у меня есть для CSS в настоящее время: 

#container {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    min-width: 800px;
}

#leftColumn {
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    width: 230px;
    position: relative;
    float: left;
}

#rightColumn {
    margin: 0px 0px 0px 250px;
    padding: 10px 10px 10px 10px;
    min-width: 530px;
    overflow: hidden;
    background: #fff;
}

Мысли

Ответы [ 2 ]

0 голосов
/ 27 января 2011

Это сработало точно так, как вы описали в моей скрипке ... сжимается до min-width с применением overflow : hidden.

Я ненавижу вложение div без необходимости, но потенциально это сценарий, где он может работатьВы?

http://jsfiddle.net/cVNaJ/

Я превратил ваш правый столбец в «обертку», где содержимое overflow : hidden содержится в дочернем элементе div, названном в честь оригинала.Может быть, это помогает случайно?

0 голосов
/ 27 января 2011

У меня работает (FF 3.6.13).Проверьте и посмотрите, есть ли что-либо еще на странице (стили или элементы), которые могут мешать.Также проверьте разные браузеры.И если вы вручную изменяете страницу при тестировании, обязательно сделайте жесткое обновление в вашем браузере (Ctrl-F5), чтобы убедиться, что загружаются новые стили.

...