html - style - proprietà css




Una barra laterale `position: fixed` la cui larghezza è impostata in percentuale? (4)

Ho utilizzato con successo il bellissimo sistema di griglia Susy per creare un layout reattivo simile a quello di WebDesignerWall.com:

Quello che non sono riuscito a implementare è una position:fixed barra laterale position:fixed .

Una barra laterale di questo genere non scorre quando la pagina scorre e rimane nello stesso posto. Ciò è straordinariamente conveniente (in ogni caso, in realtà non è possibile inserire più contenuti nella barra laterale, perché ingombrerebbe la parte superiore della pagina in una finestra stretta).

Il mio layout diventa pazzo ogni volta che applico la position:fixed a una colonna: I blocchi colorati sono dichiarati a tre colonne di larghezza, ma si estendono ulteriormente quando la position:fixed viene applicata alla barra laterale.

Penso che il problema è che la larghezza della barra laterale è relativa, cioè impostata in percentuale. A causa della position:fixed , la larghezza è misurata rispetto alla larghezza della finestra del browser, non al suo contenitore (anche se ho impostato il contenitore in position:relative ).

La domanda è: come faccio a fissare una colonna alla finestra mentre misuri la sua larghezza rispetto al suo contenitore, non alla finestra ?

Forse è possibile correggere la posizione di un elemento con JS?

PS Ho provato la width: inherit soluzione , ma non è stata di alcun aiuto per la mia situazione.


Forse è possibile correggere la posizione di un elemento con JS?

Sì, ma sarà noioso e non è la soluzione ideale.

Invece, calcola la larghezza appropriata usando JavaScript e assegnala, invece di usare la percentuale direttamente in CSS. Ecco uno schema di base:

function updateSize() {
    var outer = document.getElementById("outercontainer"); //get the container that contains your sidebar
    var navcol = document.getElementById("navcol"); //get the sidebar (which is supposed to have position: fixed;)
    navcol.style.width = Math.floor(outer.offsetWidth * 45/100) + "px"; //or whatever your percentage is
}
updateSize();
window.onresize = updateSize; /*make sure to update width when the window is resized*/

Nota: gli ID utilizzati sopra sono solo segnaposto - dovrai modificarli per adattarli alla tua pagina attuale.


Non è possibile, gli elementi di posizione fissa sono staccati dai loro contenitori, position: relative o nessuna position: relative . Basta impostare la larghezza su un valore assoluto: sembra che il tuo contenuto sia sempre largo 760 pixel, giusto?


position:fixed funziona come position:absolute quindi non è posizionato in relazione al suo contenitore. Semplicemente galleggia nel tuo documento. Una soluzione rapida sarebbe qualcosa del genere:

<div id="fixed-element" style="width:30%"> /* 30% of the document width*/
lorem ipsum dolor sit amet
</div>

<div id="faux-sidebar" style="width:30%; display:block"> /* 30% of the document, leave it empty, so it acts like a placeholder for the fixed element*/
&nbsp;
</div>

<div id="the-rest" style="width:70%"> /* the rest of the website goes here */
more lorem ipsum than ever before
</div>

Il modo per farlo è con un secondo contenitore. Non conosco il tuo codice esatto, ma ecco un esempio. Supponiamo che la tua struttura sia qualcosa del genere:

<div class="page">
  <header class="banner">
    <h1>header</h1>
  </header>
  <nav class="navigation">
    <ul class="nav-inner">
      <li>navigation link</li>
    </ul>
  </nav>
  <article class="main">
    <h2>main content</h2>
  </article>
  <footer class="contentinfo">
    <p>footer</p>
  </footer>
</div>

L'unica ipotesi importante che ho fatto è stata quella di garantire un ulteriore wrapper attorno alla barra laterale di navigazione. Ho sia il tag <nav> tag <ul> con cui lavorare. Puoi usare qualsiasi tag che vuoi, purché la barra laterale ne abbia due che possono essere usati per la struttura: l'esterno per un contenitore fisso e l'interno per la barra laterale stessa. Il CSS si presenta così:

// one container for everything in the standard document flow.
.page {
  @include container;
  @include susy-grid-background;
}

// a position-fixed container for the sidebar.
.navigation {
  @include container;
  @include susy-grid-background;
  position: fixed;
  left: 0;
  right: 0;
  // the sidebar itself only spans 3 columns.
  .nav-inner { @include span-columns(3); }
}

// the main content just needs to leave that space open.
.main { @include pre(3); }

// styles to help you see what is happening.
header, article, .nav-inner, footer {
  padding: 6em 0;
  outline: 1px solid red;
}

Saluti.





susy-compass