lokomanx
Новичок
Дата регистрации:
10.09.2012 23:26:53
Сообщений: 9
Добрый день всем!
В общем проблема в следующем: необходимо сделать так, чтобы высота основного блока менялась в зависимости от разрешения экрана, но при этом полоса прокрутки должна появляться только сбоку от элемента, где показана вся основная информация(помимо этого блока имеются шапка и футер)
как-то так:
Можно ли вообще это сделать средствами css? Или придется использовать javascript?
Буду очень благодарен всем, кто поможет решить эту задачу.
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Существует три CSS-стиля: overflow, overflow-x и overflow-y для управления отображением содержимого блочного элемента. По-умолчанию значения у этих стилей установлены в visible, которые указывают раздвигать блок, если его содержимое не помещается в заданные размеры. Если стилю overflow задать значение auto, то при необходимости у блока появятся горизонтальная и вертикальная полоса прокрутки
Соответственно можно поставить в hidden и горизонтальной полосы прокрутки не будет.
По поводу растяжения дива по размеру контента.
Вставьте внутрь дива таблицу
или есть вот такая реализация(дабы долго не писать,скопировал из того,что имеется)
<div id="content_window">
<div id="main_content">
<div class="head">
<p>Бла-бла-бла</p>
</div>
<p class="text"><span>В начале 60-х годов</span>, в связи с ростом популярности вычислительных систем, возникла идея использовать их возможности для планирования деятельности предприятия, в том числе для планирования производственных процессов. Необходимость планирования обусловлена тем, что основная масса задержек в процессе производства связана с запаздыванием поступления отдельных комплектующих, в результате чего, как правило, параллельно с уменьшением эффективности производства, на складах возникает избыток материалов, поступивших в срок или ранее намеченного срока. Кроме того, вследствие нарушения баланса поставок комплектующих, возникают дополнительные осложнения с учетом и отслеживанием их состояния в процессе производства, т.е. фактически невозможно было определить, например, к какой партии принадлежит данный</p>
<p class="text"><span>В начале 60-х годов</span>, в связи с ростом популярности вычислительных систем, возникла идея использовать их возможности для планирования деятельности предприятия, в том числе для планирования производственных процессов. Необходимость планирования обусловлена тем, что основная масса задержек в процессе производства связана с запаздыванием поступления отдельных комплектующих, в результате чего, как правило, параллельно с уменьшением эффективности производства, на складах возникает избыток материалов, поступивших в срок или ранее намеченного срока. Кроме того, вследствие нарушения баланса поставок комплектующих, возникают дополнительные осложнения с учетом и отслеживанием их состояния в процессе производства, т.е. фактически невозможно было определить, например, к какой партии принадлежит данный</p>
<p class="text"><span>В начале 60-х годов</span>, в связи с ростом популярности вычислительных систем, возникла идея использовать их возможности для планирования деятельности предприятия, в том числе для планирования производственных процессов. Необходимость планирования обусловлена тем, что основная масса задержек в процессе производства связана с запаздыванием поступления отдельных комплектующих, в результате чего, как правило, параллельно с уменьшением эффективности производства, на складах возникает избыток материалов, поступивших в срок или ранее намеченного срока. Кроме того, вследствие нарушения баланса поставок комплектующих, возникают дополнительные осложнения с учетом и отслеживанием их состояния в процессе производства, т.е. фактически невозможно было определить, например, к какой партии принадлежит данный</p>
</div>
<div id="shadow">
<span></span>
</div>
<div class="clear"></div>
</div>
}
#content_window {
background-color: #fff;
height:530px;
padding-bottom:20px;
}
#main_content {
float:left;
width:99%;
overflow:auto;
text-align:center;
height: 530px;
lokomanx
Новичок
Дата регистрации:
10.09.2012 23:26:53
Сообщений: 9
По поводу overflow я знаю, собственно он в моей работе уже фигурирует.
ПО поводу высоты блока: возможно, я не совсем точно пояснил свою мысль. Ваш вариант хороший, но мне нужно, чтобы блок подстраивался под разрешение экрана. То есть свойство Height не должно равняться фиксированному значению, оно должно растягиваться по экрану( в зависимости от высоты футера и шапки)
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Укажите процентное соотношение.
Ничто же не мешает.
Я просто не верно понял Вас.
А чтобы была только только вертикальная полоса прокрутки, overflow-x:hidden;
всё)
А чтобы была зависимость именно от разрешения,а не от размера окна браузера,то только скриптами.
Возможно это Вам поможет
http://dmtsoft.ru/bn/494/as/oneaticleshablon/
lokomanx
Новичок
Дата регистрации:
10.09.2012 23:26:53
Сообщений: 9
А чтобы была зависимость именно от разрешения,а не от размера окна браузера,то только скриптами.
Теперь уже, наверное, я вас плохо понимаю, а в чем разница( зависимость от разрешения экрана или зависимость от размера окна браузера)? Просто мне в любом случае нужно, чтобы пропорции сохранялись при изменении окна браузера/разрешения экрана.
П.С. Все равно спасибо за ответы!
lokomanx
Новичок
Дата регистрации:
10.09.2012 23:26:53
Сообщений: 9
в принципе я пробовал для этого реализацию через @media, но это вариант конечно не лучшего качества, лучше уж и в самом деле использовать javascript
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Укажите процентное соотношение.
Ничто же не мешает.
Я просто не верно понял Вас.
А чтобы была только только вертикальная полоса прокрутки, overflow-x:hidden;
всё)
А чтобы была зависимость именно от разрешения,а не от размера окна браузера,то только скриптами.
Возможно это Вам поможет
http://dmtsoft.ru/bn/494/as/oneaticleshablon/
Вывод,если я Вас верно понял,то почитайте,что такое Резиновая вёрстка и верстайте резиной.
В данном случае я бы Вам посоветовал курс Михаила "Вёрстка сайта с нуля",чтобы более не возникало подобных вопросов и вы понимали все аспекты,прежде чем начать верстать качественно
lokomanx
Новичок
Дата регистрации:
10.09.2012 23:26:53
Сообщений: 9
Я знаю что такое резиновая верстка))) И курс Михаила "Вёрстка сайта с нуля" я уже проходил)
Просто задача, которую я здесь представил достаточно необычна.
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Не вижу ничего необычного.Пример реализации штуки как у Вас я уже показывал.
Человек,который проходил такой же курс,сверстал резиновый сайт по макетику,который ему был дан для тренировки. Данный пример я Взял оттуда.
Блок с контентом там имеет ширину в зависимости от размера экрана и поэтому,когда меняется разрешение страницы,вертикальной полосы прокрутки не возникает
lokomanx
Новичок
Дата регистрации:
10.09.2012 23:26:53
Сообщений: 9
Не вижу ничего необычного.Пример реализации штуки как у Вас я уже показывал.
Тот самый код, который вы показали в самом начале? Ок, не спорю, вертикальной полосы там действительно нету, однако мне важно другое. Разрешение ведь меняется не только по ширине, с этим проблем вообще нету. Проблема в том, что, меняя высоту страницы, мы либо потеряем пропорции у элемента, либо получим эту самую полосу прокрутки. То есть ключевой вопрос здесь состоит в том, как же отрегулировать поведение высоты блока в зависимости от того, как будет меняться высота окна браузера.
