Итак, я недавно обновил сайт для моего клиента, который хотел сохранить его очень просто. Обычно я проектировал сайты так, чтобы они были определенной шириной, а затем горизонтально центрированы на странице. Из-за галереи, которую они запросили, я сделал сайт 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;
}
изменен #textContent на ширину: 100%, но он сдвинул все вправо, а ширина столбцов была меньше. – mwgideon
Хм. Это означает, что что-то еще мешает нормальной компоновке. Не могли бы вы настроить версию голых костей на jsfiddle.net, чтобы попытаться изолировать проблемы? – Ampersand