En-tête statique + menu, corps déroulant

C'est ce que je suis en train de réaliser:

+--------écran-----------------------+ 
| ______________________ |*| 
| |_statique_en-tête______| |*| 
| | | | |*| 
| | contenu |menu | |*| 
| | défilement |static| |*| 
| | | | |*| 
| | | | |*| 
| | | | |*| 
+-------------------------------------+

Le contenu est de hauteur variable, et le contenu de la barre de défilement doit être afficher dans la page (et non pas sur que c'est sur la zone).
J'ai réussi à obtenir l'idée de base, mais je vais avoir de la difficulté à obtenir le div du contenu dans position correcte lorsque la barre de défilement indique, et même si je l'ai mis pour toujours afficher les barres de défilement, je ne peux pas utiliser une largeur fixe, parce qu'ils diffèrent en fonction du navigateur.

<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;">
    <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;">
        Header
    </div>
</div>

<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's -->
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;">
    <div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;">
        <div style="background-color:Orange; width:100%; height:900px;">
            Content
        </div>
    </div>
</div>

<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;">
    <div style="width:500px; float:left;">
        <div style="background-color:Green; float:right; width:200px; ">
            Menu
        </div>            
    </div>
</div>

Dans le code ci-dessus le contenu de la barre de défilement de la largeur, comment puis-je obtenir à droite avec le reste de la page (ie. calcul de la position sans tenir compte de la largeur de la barre de défilement, même si elle en a un)?

source d'informationauteur Danicco

  1. 6

    Si je comprends votre problème correctement ce sera une solution: http://jsfiddle.net/7pJS8/

  2. 1
    <style>
body {
    padding: 0px;
}
.container {
    margin: 0px auto;
    position: relative;
    width: 500px;
}

#header {
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000;
}
#header .container {
    background: blue;
    height: 100px;
}

#content {
    background: green;
    height: 1500px;
    margin-top: 100px;
}
#content .inner {
    margin-right: 200px;
}

#sidebar {
    left: 0px;
    position: fixed;
    top: 100px;
    width: 100%;
    z-index: 1000;
}
#sidebar .inner {
    background: red;
    height: 200px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
}
</style>

<div id="header">
    <div class="container">
        header
    </div>
</div>
<div id="content" class="container">
    <div class="inner">
        content
    </div>
</div>
<div id="sidebar">
    <div class="container">
        <div class="inner">
            sidebar
        </div>
    </div>
</div>

    Solution Possible: http://jsfiddle.net/zWERN/

  3. 0

    Il y a des façons de le faire avec des hauteurs fixes et ensuite utiliser la propriété overflow sur le défilement des zones. Cependant, ce n'est pas une bonne pratique, ce que vous devriez regarder est à l'aide d'un collant en-tête ou le défilement de l'en-tête (celui qui suit l'affichage de la zone que l'utilisateur fait défiler en haut et en bas) de jQuery ou de votre bibliothèque JS de choix.

  4. 0

    N'est pas position:fixed résoudre votre problème? Si vous définissez position:fixed à en-tête et le menu div?

  5. 0

    Réglage d'un rouleau sur l'ensemble de la page, pourrait entraîner la disparition de l'en-tête et le menu - lorsque le contenu est long.

    Ce que vous cherchez est un sous-ensemble de la Saint Graal de la conception.

    Ici's une mise en œuvre à l'aide de la fonction "flex" display:

    <!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <!-- No need for 'flex-direction: row' because it's the default value -->
    <div style="display: flex; flex: 1">
      <div>NAV|</div>
      <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
      </div>
      <div>|SIDE</div>
    </div>
    <div>------------<br/>FOOTER</div>
  </body>
</html>