Я пытаюсь создать DIV с горизонтальной прокруткой (слева направо) в ячейке таблицы с динамической шириной (DIV с display: table-cell ). Прокручивающемуся DIV должно быть разрешено занимать 100% содержащего элемента, не заставляя его выходить за пределы ширины всех предков. Я бы предпочел использовать чистую разметку / исправление CSS для этой проблемы, без JavaScript или статической ширины.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style>

#page
{
    width: 100%;
    max-width: 500px;
}

.tcell
{
    display: table-cell;
    min-width: 150px;
    padding: 10px;
}

#scrollbox
{
    width: 100%;
    height: 90px;
    background-color: red;
    overflow: auto;
}

#scrollcontent
{
    background-color: green;
    width: 900px;
    height: 50px;
    margin: 10px;
    white-space: nowrap;
}

</style>
</head>
<body style="width:100%;">

<div id="page">
    <div class="tcell" style="background-color: teal;">Hello world</div>

    <div class="tcell" style="background-color: yellow;">
        <div id="scrollbox">
            <div id="scrollcontent"></div>
        </div>
    </div>
</div>

</body>
</html>

JSFiddle: http://jsfiddle.net/L69qJ/

Проблема видна в IE8, Chrome, Firefox и Safari.

В этом примере желтый div вынужден вырасти за пределы своего контейнера (мы ожидаем, что вся страница будет не больше 500 пикселей. См. Стиль max-width для #page ), потому что красный DIV не соблюдает overflow: auto и поэтому пытается развернуться, чтобы полностью отобразить зеленый DIV.

Ожидаемое поведение: я хочу, чтобы сине-голубые и желтые ячейки добавляли до 100% их родительских ( #page ). Зеленая ячейка настолько широка, что заставляет красную ячейку расширяться, а желтая ячейка - расширяться. Ожидается, что красная ячейка будет использовать горизонтальную полосу прокрутки (слева направо) вместо того, чтобы расширять желтую ячейку.

1
blakeo_x 17 Апр 2014 в 18:46

2 ответа

Лучший ответ
display:table;
table-layout:fixed;

На страницу.

Вот оно:

http://jsfiddle.net/L69qJ/8/

1
arocketman 17 Апр 2014 в 16:15

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

0
kthornbloom 17 Апр 2014 в 15:09