Вертикальная прокрутка Div

0

Поэтому я недавно обновил сайт для моего клиента, который хотел сохранить его очень просто. Обычно я проектировал сайты так, чтобы они были определенной шириной, а затем горизонтально расположены на странице. Из-за галереи, которую они запросили, я сделал сайт 100% с минимальной шириной 960 пикселей и максимальной высотой 576 пикселей. По большей части ее текстовое содержимое ограничено, поэтому есть только несколько страниц, которые приводят к вертикальной прокрутке в Div, когда общая ширина страницы достигает 960 пикселей. В поле Div используется переполнение-x: auto; команда. Это хорошо работает на всех страницах, кроме одного.

Например, следующая страница выглядит великолепно на 100%, и когда ширина окна изменяется на то, где текст должен прокручиваться, полоса прокрутки находится в крайнем правом углу: http://www.lisagleeson.com/about/

У меня возникла небольшая проблема со следующей страницей: http://www.lisagleeson.com/resume/

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

Вот CSS, который я использую, Контент является основным Div, textContent находится внутри этого, а затем Возобновляет сидит внутри этого.

Заранее спасибо за помощь...

#content {
width: 100%;
min-width: 960px;
height: 576px;
margin-top:20px;
position: absolute;
background-color: #ffffff;
display: none;
}

#textContent {
min-width: 400px;
height: 515px;
float: left;
margin: -525px 20px 10px 520px;
padding: 10px 0px 0px 20px;
overflow-x: auto;
}

#resume {

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;

-moz-column-gap:40px;
-webkit-column-gap:40px;
column-gap:40px;

-moz-column-rule: 1px outset #eeeeee; 
-webkit-column-rule: 1px outset #eeeeee; 
column-rule: 1px outset #eeeeee; 

}
Теги:

1 ответ

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

Полоса прокрутки должна отображаться в крайнем правом углу div, для которого требуется прокрутка.

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

Попробуйте установить #textContent на width:100% и посмотрите, поможет ли это вам.

  • 0
    изменил #textContent на width: 100%, но он сдвинул все вправо и ширина столбцов была меньше.
  • 0
    Хм. Это означает, что что-то еще мешает нормальной компоновке. Не могли бы вы установить голую версию на jsfiddle.net, чтобы попытаться изолировать проблемы?

Ещё вопросы

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