Переполнение CSS-div с абсолютно позиционируемыми элементами

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

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

Я попытался использовать директиву min-width в моем существующем CSS, но безрезультатно. min-width ДЕЙСТВИЯ достигают «обрезания», который я ищу, однако горизонтальная полоса прокрутки не появляется, и я не могу прокручивать ее горизонтально.

Есть ли способ сделать это, используя существующую парадигму, или нужно ли сделать таблицу стилей по-другому? Ниже моя существующая реализация (с атрибутом мин-ширина я тестирование для content_column):

html { 
    overflow: hidden; 
} 

body { 
    margin: 0px; 
    padding: 0px; 
    background: #E5E5E5; 
    color: #000000; 
    font-family: 'Open Sans', sans-serif; 
    height: 100%; 
    max-height: 100%; 
    overflow: hidden; 
    border: 0px none; 
} 

#header { 
    position: absolute; 
    margin: 0px; 
    top: 0px; 
    left: 0px; 
    display: block; 
    color: #FFFFFF; 
    background: #146647; 
    font-size: 1.5em; 
    padding: 5px; 
    width: 100%; 
    overflow: hidden; 
    z-index: 3; 
} 

#option_column { 
    position: absolute; 
    left: 0px; 
    top: 40px; 
    bottom: 0; 
    background: #0F4C35; 
    color: #FFFFFF; 
    width: 155px; 
    padding: 3px; 
    z-index: 2; 
    overflow: auto; 
} 

#content_column { 
    position: absolute; 
    overflow: auto; 
    min-width: 1000px; 
    z-index: 1; 
    top: 40px; 
    left: 161px; 
    right: 0px; 
    bottom: 0px; 
    padding: 3px; 
    background: #E5E5E5; 
    color: #000000; 
    font-size: 14px; 
}

И это мой HTML структура:

<body> 
    <div id="header"> 
     Head 
    </div> 

    <div id="option_column"> 
     Option Column 
    </div> 

    <div id="content_column"> 
     <div class="header_text">Content Header</div> 
     <div id="subheader"> 
      Content (content_column intended to stop resizing at 1000px) 
     </div> 
    </div> 

</body>

источник

2013-02-24 Mike Nielsen

Начальная точка скрипку: http://jsfiddle.net/4M43d/ – isherwood

«У меня есть абсолютно позиционирован макет (...) делает таблицу стилей нужно сделать по-другому» , У меня возникло бы желание ответить ДА. – FelipeAls

Да, редко, что преднамеренная горизонтальная прокрутка - хорошая идея. Это хлопот для вашего пользователя. Кроме того, ваш столбец с содержанием 1000 пикселей и боковая панель означают, что большинство ваших посетителей не смогут увидеть полную ширину вашего сайта. Если у вас нет какого-то странного требования, я бы пересмотрел этот план. – isherwood

Что

#content_column {overflow-x: scroll}

do? Обратите внимание, что IE < 9 не выполняет переполнение по оси, поэтому вам нужно будет использовать {overflow: scroll}.

источник

2013-02-24 21:27:02 isherwood

«overflow-x: scroll» помещает отключенную горизонтальную полосу прокрутки в нижней части div. После изменения размера окна, прошедшего через точку, где я должен прокручивать по горизонтали, он остается отключенным и не работает. –

Также заметили, что изменение размера окна также приведет к тому, что окно «перекрывает» полосу прокрутки (то есть, как только я нажму на минимальную ширину, вместо активации полосы прокрутки окно просто изменит ее размер). –

В разделе содержимого установите

width:1000px;

overflow-y: auto;

Но этот путь ширина всегда будет оставаться на 1000px. Другими словами, как следует

#content_column { 
position: absolute; 
width: 1000px; 
overflow-y: auto; 
overflow-x:scroll; /* override overflow:hidden; applied to body & html */ 
z-index: 1; 
top: 40px; 
left: 161px; 
right: 0px; 
bottom: 0px; 
padding: 3px; 
background: #E5E5E5; 
color: #000000; 
font-size: 14px; 
}

источник

2013-02-24 21:33:52

Выполнение этого до сих пор не позволяет меня к горизонтальному прокрутку (он просто «отключается»). –

Попробуйте 'width: 1000px; Переполнение-у: авто; Переполнение-х: прокрутка; '. Кроме того, попробуйте удалить 'overflow: hidden;' в тегах body и html и применить свойство 'overflow' только к разделу содержимого. – 2013-02-24 21:49:13

Я обновил код выше, чтобы принять во внимание 'overflow-x: scroll;'. – 2013-02-24 22:12:18

Переполнение CSS-div с абсолютно позиционируемыми элементами

ответ

Смежные вопросы