Проблема создания прокручиваемой области содержимого с высотой, определенной в процентах

Мы создаем веб-страницу с заголовком, содержанием и нижним колонтитулом. Верхний и нижний колонтитулы должны быть видны в любое время, а контент должен прокручиваться. Контейнер div имеет фиксированную ширину, но без фиксированной высоты. Я решил проблему сохранения нижнего колонтитула в конце, используя css sticky footer (http://ryanfait.com/sticky-footer/). Область содержимого разделена на две части (content1 и content2) и имеет гибкий прокручиваемый div.Проблема создания прокручиваемой области содержимого с высотой, определенной в процентах

Проблема в том, что высота области содержимого не определена абсолютно точно (т.е. 100%). Мы хотели бы это, когда данные в content1 или content2 превышают размер экрана, который он автоматически переполняет в свою собственную независимую прокручиваемую панель, а верхний и нижний колонтитулы остаются видимыми.

Мы хотели бы избежать использования iframe. Есть ли способ, мы можем сделать это с помощью javascript (jquery или других)? Мы очень вдохновляемся домашней страницей goole docs.

Любая помощь будет высоко оценена.

Choesang :)

источник

2009-07-29 tchoesang

Перед тем, как показать содержимое можно добавить его в DIV, который расположен за пределами экрана. Затем возьмите высоту содержимого и выполните работу в зависимости от размера окна просмотра клиентов, если это необходимо для прокрутки. Затем снимите содержимое с экрана и добавьте в свой основной div высоту, указанную для области просмотра и переполнения: автоматически.

источник

2009-07-29 18:45:48 redsquare

Hey Choesang, redsquare, вот еще один способ, которым вы можете это сделать, не снимая ничего с экрана.

Сначала найдите высоту окна просмотра, с которым вы должны работать, назовем это «viewportHeight». Если содержимое вашего верхнего и нижнего колонтитулов уже установлено, они будут иметь высоту. Вычислите их высоты и добавьте их вместе, мы будем называть это «usedHeight». Высота, на которую вы оставили, чтобы разместить содержимое: остатокHeight = viewportHeight - usedHeight;

Если вы установили для свойства css в контейнере содержимого значение height = остальноеHeight и overflow-y = auto, ваш контент всегда будет занимать, по меньшей мере, минимальную высоту контента, и если будет слишком много контента, это заставит появится полоса прокрутки.

Мы собираемся использовать библиотеку Prototype, чтобы помочь нам, но мы могли бы просто использовать jQuery или даже написать код для вычисления высот сами.

Обратите внимание, что в теле я устанавливаю высоту до 100%, а также отступ до 0 и маржу до 0. Большинство браузеров накладывают 10px прокладку вокруг тела, и это приведет к тому, что ваш нижний колонтитул будет отображаться экран в процессе, который я показываю.

 
<html> 
<head> 
<script type='text/javascript' src='prototype.js'></script> 
</head> 
<body style='height: 100%; padding: 0; margin: 0;'> 
<div> 
    <div id='header'>header text</div> 
    <div id='content'>content text</div> 
    <div id='footer'>footer text</div> 
</div> 
<script type='text/javascript'> 
    // Here we will set the text of the content, calculate its height, 
    // and set the max height. In production I would use less lines, 
    // for here writing each step out for clarity. 
    var viewportHeight = document.viewport.getHeight(); 
    var headerHeight = $('header').getHeight(); 
    var footerHeight = $('footer').getHeight(); 
    var usedHeight = headerHeight + footerHeight; 
    var remainingHeight = viewportHeight - usedHeight; 

    // we have our remaining height, now set the style. 
    $('content').setStyle({ 
    'height': remainingHeight, 
    'overflow-y': 'auto' 
    }); 

</script> 
</body> 
</html>

источник

2009-07-29 20:24:31

вы будете хотеть добавить слушателя изменения размера окна, чтобы вы могли сохранить высоту содержимого правильной, если размер видового экрана изменится. – daniellmb

Проблема создания прокручиваемой области содержимого с высотой, определенной в процентах

ответ

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