web-dev-qa-db-fra.com

Comment créer un div sans défilement en haut d'une page HTML sans deux ensembles de barres de défilement

Comment créer un div sans défilement qui ressemble au ruban MS Office 2007 sur une page Web sans deux ensembles de barres de défilement. Un pour la fenêtre et un pour le div.

htmlribbonnon-scrolling
19
Daniel

Essaye ça:

<!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>

Fondamentalement, ce que vous faites est de supprimer les barres de défilement du corps et d'appliquer des barres de défilement aux éléments à l'intérieur du document. C’est simple. L'astuce consiste à obtenir le #main div à dimensionner pour remplir l'espace sous l'en-tête. Ceci est accompli dans la plupart des navigateurs en définissant les positions top et bottom et en laissant height non défini. Le résultat est que le haut de la div est fixé sous l'en-tête et le bas de la div s'étendra toujours vers le bas de l'écran.

Bien sûr, il y a toujours IE6 pour s'assurer que nous gagnons nos chèques de paie. Avant la version 7 IE ne dériverait pas les dimensions des positions absolues conflictuelles. Certaines personnes utilisent les expressions css d'IE pour résoudre ce problème pour IE6, mais ces expressions évaluent littéralement sur chaque déplacement de souris, donc je redimensionne simplement le #main div sur l'événement resize et masquant ce bloc de javascript des autres navigateurs à l'aide d'un commentaire conditionnel.

Les lignes définissant la largeur à 99% et setTimeout pour la remettre à 100% corrigent une petite bizarrerie de rendu dans IE6 qui fait apparaître la barre de défilement horizontale de temps en temps lorsque vous redimensionnez la fenêtre.

Remarque: Vous devez utiliser un doctype et sortir IE du mode bizarreries.

15
Prestaul

Utilisez un élément de position fixe <div>, Qui a 100% de largeur et un haut z-index.

Vous voudrez également vous assurer que le début de votre contenu de défilement n'est pas masqué par le <div> Fixe, jusqu'à ce que vous commenciez à faire défiler vers le bas, en le mettant dans un autre <div> Et en le positionnant de manière appropriée .

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

Notez que la hauteur du premier <div> Et la marge supérieure du second devront être ajustées en fonction de vos besoins.

P.S. Cela ne fonctionne pas dans IE7, pour une raison quelconque, mais c'est un bon point de départ, et je suis sûr que vous pouvez trouver des variantes sur ce thème, qui fonctionnent de la manière que vous souhaitez.

8
belugabob

Je serai probablement critiqué par les puristes CSS ici, mais l'utilisation d'un tableau avec 100% de largeur et de hauteur fonctionne dans n'importe quel navigateur, et ne nécessite pas de hacks CSS spécifiques au navigateur.

4
Filini

Belugabob a la bonne idée que ce que vous essayez de faire est un positionnement fixe, que IE 6 ne prend pas en charge.

J'ai modifié un exemple à partir du bas de ce tutoriel qui devrait faire ce que vous voulez et prendre en charge IE 6+ en plus de tous les bons navigateurs. Cela fonctionne parce que IE vous permet de mettre Javascript dans les déclarations de style:

<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
joelhardi

Vous pouvez également utiliser


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

Cela bloquera le div en haut de la page, mais si votre page défile vers le bas, elle y restera.

0
Nikola Stjelja