2013-12-18 6 views
0

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

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

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

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

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

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

#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; 

} 

ответ

0

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

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

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

+0

изменен #textContent на ширину: 100%, но он сдвинул все вправо, а ширина столбцов была меньше. – mwgideon

+0

Хм. Это означает, что что-то еще мешает нормальной компоновке. Не могли бы вы настроить версию голых костей на jsfiddle.net, чтобы попытаться изолировать проблемы? – Ampersand

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