Поэтому я недавно обновил сайт для моего клиента, который хотел сохранить его очень просто. Обычно я проектировал сайты так, чтобы они были определенной шириной, а затем горизонтально расположены на странице. Из-за галереи, которую они запросили, я сделал сайт 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;
}
Полоса прокрутки должна отображаться в крайнем правом углу div, для которого требуется прокрутка.
Если вы увеличиваете ширину #textContent, полоса прокрутки будет двигаться дальше вправо. Проблема с установкой его на размер статического пикселя заключается в том, что для людей с меньшими экранами его можно было сдвинуть с края страницы.
Попробуйте установить #textContent на width:100%
и посмотрите, поможет ли это вам.