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

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

Ответ 1

Попробуйте следующее:

<!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 div, чтобы заполнить пробел ниже заголовка. Это выполняется в большинстве браузеров, устанавливая как позиции top, так и bottom и оставляя height не установленным. В результате верхняя часть div фиксируется под заголовком, а нижняя часть div всегда будет растягиваться до нижней части экрана.

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

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

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

Ответ 2

Используйте элемент фиксированной позиции <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, но это хорошая отправная точка, и я уверен, что вы можете разработать некоторые варианты этой темы, которые работают так, как вы хотите.

Ответ 3

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

Ответ 4

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


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

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

Ответ 5

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"> ...