Как создать div без прокрутки в верхней части HTML-страницы без двух наборов полос прокрутки - PullRequest
Новая
       53

Как создать div без прокрутки в верхней части HTML-страницы без двух наборов полос прокрутки

18 голосов
/ 02 ноября 2008

Как создать div без прокрутки, который выглядит как лента MS Office 2007 на веб-странице без двух наборов полос прокрутки. Один для окна и один для div.

Ответы [ 5 ]

14 голосов
/ 03 ноября 2008

Попробуйте это: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Fixed Header/Full Page Content</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body,
            div {
                margin: 0;
                padding: 0;
            }

            body {
                /* Disable scrollbars and ensure that the body fills the window */
                overflow: hidden;
                width: 100%;
                height: 100%;
            }

            #header {
                /* Provide scrollbars if needed and fix the header dimensions */
                overflow: auto;
                position: absolute;
                width: 100%;
                height: 200px;
            }

            #main {
                /* Provide scrollbars if needed, position below header, and derive height from top/bottom */
                overflow: auto;
                position: absolute;
                width: 100%;
                top: 200px;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="header">HEADER</div>
        <div id="main">
            <p>FIRST</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>LAST</p>
        </div>
<!--[if lt IE 7]>
        <script type="text/javascript">
            var elMain = document.getElementById('main');

            setMainDims();
            document.body.onresize = setMainDims;

            function setMainDims() {
                elMain.style.height = (document.body.clientHeight - 200) + 'px';
                elMain.style.width = '99%'
                setTimeout("elMain.style.width = '100%'", 0);
            }
        </script>
<![endif]-->
    </body>
</html>

По сути, вы делаете удаление полос прокрутки из тела и применение полос прокрутки к элементам внутри документа. Это просто. Хитрость заключается в том, чтобы получить размер #main, чтобы заполнить пространство под заголовком. Это достигается в большинстве браузеров, устанавливая позиции top и bottom и оставляя height неустановленным. В результате верхняя часть div фиксируется под заголовком, а нижняя часть div всегда будет растягиваться до нижней части экрана.

Конечно, там всегда есть IE6, чтобы удостовериться, что мы зарабатываем наши зарплаты. До версии 7 IE не получал измерения из конфликтующих абсолютных позиций. Некоторые люди используют выражения CSS css для решения этой проблемы для IE6, но эти выражения буквально вычисляются при каждом перемещении мыши, поэтому я просто изменяю размер #main div в событии resize и скрываю этот блок javascript от другие браузеры используют условный комментарий.

Линии, устанавливающие ширину на 99%, и setTimeout, чтобы установить его на 100%, исправляют небольшую странность рендеринга в IE6, из-за которой горизонтальная полоса прокрутки иногда появляется при изменении размера окна.

Примечание. Вы должны использовать тип документа и вывести IE из режима причуд.

8 голосов
/ 02 ноября 2008

Используйте элемент фиксированной позиции <div>, который имеет ширину 100% и высокий z-index.

Вы также захотите убедиться, что начало прокручиваемого контента не будет скрыто фиксированным <div>, пока вы не начнете прокручивать вниз, поместив его в другой <div> и расположив его соответственно. * 

<body>
    <div style="position: fixed; top: 0px; width:100%; height: 100px;">
        HEader content goes here
    </div>
    <div style="margin-top: 100px;">
        Main content goes here
    </div>
</body>

Обратите внимание, что высоту первого <div> и верхнее поле второго необходимо будет отрегулировать в соответствии с вашими потребностями.

P.S. По какой-то причине это не работает в IE7, но это хорошая отправная точка, и я уверен, что вы можете разработать какой-то вариант этой темы, который работает так, как вы этого хотите.

4 голосов
/ 04 ноября 2008

Я, вероятно, буду поражен пуристами CSS здесь, но использование таблицы со 100% шириной и высотой работает в любом браузере и не требует специфичных для браузера хаков CSS.

0 голосов
/ 03 ноября 2008

Belugabob имеет правильную идею, что вы пытаетесь сделать фиксированное позиционирование, которое IE 6 не поддерживает.

Я изменил пример из этого урока , который должен делать то, что вы хотите, и поддерживать IE 6+ в дополнение ко всем хорошим браузерам. Это работает, потому что IE позволяет вам поместить Javascript в объявления стиля: 

<style type="text/css">
  div#fixme {
    width: 100%; /* For all browsers */
  }
  body > div#fixme {
    position: fixed; /* For good browsers */
  }
</style>

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
  div#fixme {
    /* IE5.5+/Win - this is more specific than the IE 5.0 version */
    right: auto; bottom: auto;
    left: expression( ( 0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    top: expression( ( 0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
  }
</style>
<![endif]>
<![endif]-->

<body>
  <div id="fixme"> ...
0 голосов
/ 02 ноября 2008

Вы можете альтернативно использовать 


<div style='position:absolute;top:0px:left:0px;'>Text&lt/div>;

Он заклинивает div в верхней части страницы, но если ваша страница прокручивается вниз, он останется там.

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

Похожие темы

...