Div с полосой прокрутки на странице фиксированной высоты - PullRequest
Новая
       0

Div с полосой прокрутки на странице фиксированной высоты

8 голосов
/ 20 сентября 2011

У меня есть эта HTML-структура: 

<body>
    <div id="container">
        <div id="header">Not empty</div>
        <div id="content">
            <div id="inner_header">Not empty</div>
            <div id="scrollable_content">Very long content</div>
        </div>
    </div>
</body>

Я хочу, чтобы страница имела фиксированную высоту, равную высоте экрана, и я также хочу вертикальную полосу прокрутки для div scrollable_content.

Я пробовал использовать эти стили, но полученная страница больше экрана, поэтому я получаю две полосы прокрутки: 

html, body {
    height:100%;
}
div#container {
    height:100%;
}
div#scrollable_content {
    height:100%;
    overflow-y:auto;
    position:absolute;
}

Как я могу сделать это с помощью CSS3?

Редактировать: Я нашел решение, используя jQuery (см. Ниже).Я хотел бы знать, возможно ли это с использованием только CSS3?

Заранее спасибо!

Ответы [ 4 ]

12 голосов
/ 20 сентября 2011

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

http://jsfiddle.net/gX2DG/

Чтобы получить одну полосу прокрутки, которая появляется только под заголовком, вам нужно изменить свой CSS. Этот CSS работает только с заголовками с фиксированной высотой.

  1. Обнулить поля / отступы для html / body и установить overflow:hidden, чтобы они не вызывали полосу прокрутки основного браузера
  2. Установить body на 100% высоты, чтобы мы могли установить 100% для div внутри него
  3. Абсолютно поместите дочерний div, который будет содержать прокручиваемый контент. Затем используйте левую, правую, верхнюю и нижнюю части, чтобы растянуть его, чтобы заполнить экран.

http://jsfiddle.net/J4Ps4/

/* set body to 100% so we can set 100% on internal divs */
/* zero margin/padding and set overflow to hidden to prevent default browser scrollbar */
html, body { height:100%; margin: 0; padding: 0; overflow: hidden; }
div { margin: 0; padding: 0;  }

/* on child div give it absolute positioning and then use top/bottom to stretch it */
/* top must be equal to the height of the header */
div#scrollable_content {
  position: absolute;
  top: 50px;
  bottom: 0px;
  width: 100%;
  overflow-y:auto;
  border: 1px solid green;
}
1 голос
/ 20 сентября 2011

Мое предложение:

-При включении JavaScript, чтобы изменить размер контейнера div / scrollable_content div, чтобы он всегда был на 100% высоты браузера. Если люди изменят размер, развернут и т. Д., В окне браузера ваши высоты будут отключены.

В зависимости от веб-сайта / приложения это может быть сделано по таймеру (setTimeout) или прослушиванию событий изменения размера браузера

Выезд: jQuery - высота динамического div

или

http://css -discuss.incutio.com / вики / Hundred_Percent_Height

Обновление:

Вот что я говорил: http://jsfiddle.net/7TqsE/21/

У меня просто есть кнопка изменения размера, но вы можете увидеть, измените ли вы размер нижнего правого окна и нажмете кнопку, он изменит размер этого div, чтобы вы стали высотой содержащего элемента div.

Вы также можете расширить это, получив высоту браузера (в этом примере указана ширина). Я не писал этот сценарий, он тот же самый, который извергался по всему Интернету, я просто скопировал его: 

if( typeof( window.innerWidth ) == 'number' ) { 

//Non-IE 

myWidth = window.innerWidth;
myHeight = window.innerHeight; 

} else if( document.documentElement && 

( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { 

//IE 6+ in 'standards compliant mode' 

myWidth = document.documentElement.clientWidth; 
myHeight = document.documentElement.clientHeight; 

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { 

//IE 4 compatible 

myWidth = document.body.clientWidth; 
myHeight = document.body.clientHeight; 

}
0 голосов
/ 20 сентября 2011

Это решение, которое я нашел до сих пор с помощью jQuery: 

window.setTimeout(function () {
$(document).ready(function () {
    var ResizeTarget = $('#content');
ResizeTarget.resize(function () {
    var target = $('#scrollable_content');
    target.css('height', $(document).height() - $("#header").height() - $("#inner_header").height());
}).trigger('resize');
}); }, 500);
0 голосов
/ 20 сентября 2011

используя код от mrtsherman, я сделал ваше решение:)

Я надеюсь, что это так.

http://jsfiddle.net/zzlawlzz/Guq9K/2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...