Intestazione statica + menu scorrevole corpo

Questo è quello che sto cercando di realizzare:

+--------schermo-----------------------+ 
| ______________________ |*| 
| |_statici_intestazione______| |*| 
| | | | |*| 
| | content |menu | |*| 
| | scorrevole |static| |*| 
| | | | |*| 
| | | | |*| 
| | | | |*| 
+-------------------------------------+ 

È il contenuto di altezza variabile, e il contenuto di scorrimento devono essere visualizzati nel corpo della pagina (e non è della zona).
Sono riuscito a ottenere l’idea di base, ma sto avendo difficoltà ad ottenere il contenuto del div in posizione corretta quando la barra di scorrimento mostra, e anche se ho impostato ” mostra sempre la barra di scorrimento, non è possibile utilizzare una larghezza fissa, in quanto differiscono da browser a browser.

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

Nel codice sopra il contenuto è fuori dalla barra di scorrimento larghezza, come posso farlo bene con il resto della pagina (ie. il calcolo della posizione, senza considerare la barra di scorrimento larghezza, anche se ne ha uno)?

  • +1 ascii grafica. E ‘ sempre bello vedere bene formattato domanda da parte di un nuovo utente in MODO.
  • Si tratta di essere di larghezza fissa o l’intestazione di occupare l’intera finestra?
  • L’intero “corpo” (intestazione, contenuto+menu in basso) deve essere su una larghezza fissa. Ho avuto problemi prima con davvero ampio monitor quando non ho impostato una larghezza fissa…
  • Conoscenza HTML è stato abbastanza difficile, posso suggerire che, in futuro, è opportuno aggiungere i nomi di classe/Id e utilizzare un foglio di stile.
InformationsquelleAutor Danicco | 2011-03-04

 

5 Replies
  1. 7

    Se ho capito bene il tuo problema in modo corretto questa sarà una soluzione: http://jsfiddle.net/7pJS8/

    • Supponiamo che la statica sezione di intestazione non era una altezza costante, ma varia a seconda della situazione? C’è ancora un css unico modo per ottenere il contenuto al di sotto di scorrimento, piuttosto che tutta la finestra?
  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>

    Possibile soluzione: http://jsfiddle.net/zWERN/

  3. 0

    C’è il modo di farlo con altezze fisse e quindi utilizzare la proprietà overflow sul scorrevole aree. Tuttavia, questa non è una buona pratica, ciò che si dovrebbe guardare è utilizzando un appiccicoso di intestazione o di scorrimento di intestazione (uno che segue l’area di visualizzazione l’utente scorre in su e in giù) da jQuery o la vostra libreria JS di scelta.

  4. 0

    Non position:fixed risolvere il tuo problema? Se si imposta position:fixed di intestazione e menu div?

    • Sì lo fa, anche se ricordo vagamente questo non sia un opzione “standard”. O forse era in quanto a background-position, ora non sono sicuro. Ho intenzione di provare, grazie!
  5. 0

    Impostazione di una pergamena a tutti la pagina, potrebbe comportare la scomparsa di intestazione e menu – quando il contenuto è lunga.

    Quello che stai cercando è un sottoinsieme di Santo Graal design.

    Qui‘un’implementazione con 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>

Lascia un commento