¿Una barra lateral de "posición: fija" cuyo ancho se establece en porcentaje?

Question

He utilizado con éxito la hermosa Sistema de red Susy para crear un diseño responsivo similar al de WebDesignerWall.com:

Lo que no logré implementar es un position:fixed barra lateral.

Una barra lateral de este tipo no se desplazará cuando se desplaza la página y permanecerá en el mismo lugar.Eso es increíblemente conveniente (de todos modos, en realidad no puedes poner más contenido en la barra lateral, porque saturaría la parte superior de la página en una ventana estrecha).

Mi diseño se vuelve loco cada vez que presento la solicitud. position:fixed a una columna:Los bloques de colores se declaran en tres columnas de ancho, pero se extienden más cuando position:fixed se aplica a la barra lateral..

Creo que el problema es que el ancho de la barra lateral es relativo, es decir.mi.fijado en porcentaje.Debido a position:fixed, el ancho se mide con el ancho de la ventana del navegador, no con su contenedor (aunque configuré el contenedor en position:relative).

La pregunta es: ¿Cómo puedo fijar una columna a la ventana mientras mido su ancho con respecto a su contenedor, no con la ventana gráfica??

¿Quizás sea posible arreglar la posición de un elemento con JS?

PD: He probado el width: inherit solución, pero no fue de ninguna ayuda para mi situación.

Answer 1

La forma de hacerlo es con un segundo contenedor.No sé su código exacto, pero aquí hay un ejemplo.Supongamos que su estructura es algo como esto:

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

La única suposición importante que hice allí fue asegurar un contenedor adicional alrededor de mi barra lateral de navegación.tengo ambos <nav> etiqueta y el <ul> etiqueta para trabajar.Puede usar las etiquetas que desee, siempre que la barra lateral tenga dos que se puedan usar para la estructura: la exterior para un contenedor fijo y la interior para la propia barra lateral.El CSS se ve así:

// 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;
}

Salud.

Answer 2

No se puede, los elementos de posición fija se separan de sus contenedores, position: relative o no position: relative.Simplemente establezca su ancho en un valor absoluto; parece que su contenido siempre tiene 760 píxeles de ancho, ¿verdad?

Answer 3

¿Quizás sea posible arreglar la posición de un elemento con JS?

Sí, pero será tedioso y no es la solución ideal.

En su lugar, calcule el ancho apropiado usando JavaScript y asígnelo, en lugar de usar el porcentaje directamente en CSS.Aquí hay un esquema básico:

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: Los ID utilizados anteriormente son solo marcadores de posición; deberá modificarlos para que se ajusten a su página real.

Answer 4

¿Por qué no usas simplemente las matemáticas?=)

HTML de ejemplo:

 <div class="container">
    <div class="col">
        <div class="fixed">This is fixed</div>
    </div>
</div>

CSS

.container {
    width: 80%;
    margin: 0 auto;
}

.col {
   float: left;
    width: 33.3333333333%;
}

.fixed {
    position: fixed;
    width: 26.666666666%; /* .container width x .col width*/
}

Answer 5

position:fixed funciona como position:absolute por lo que no está posicionado en relación con su contenedor.Simplemente flota en su documento.Una solución rápida sería algo como esto:

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