html - que - Una `posición: barra lateral fija ''cuyo ancho se establece en porcentaje?

header html css

Question

He utilizado con éxito el hermoso sistema de grillas Susy para crear un diseño responsivo similar al de WebDesignerWall.com:

Lo que fallé en implementar es una position:fixed barra lateral position:fixed .

Dicha barra lateral no se desplazará cuando la página se desplaza y permanece en el mismo lugar. Eso es fantásticamente conveniente (de todos modos, en realidad no puedes poner más contenido en la barra lateral, porque llenaría la parte superior de la página en una ventana estrecha).

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

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

La pregunta es: ¿cómo puedo arreglar una columna en la ventana mientras mido su ancho contra su contenedor, no la ventana gráfica ?

Tal vez es 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

Tal vez es 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: las ID utilizadas anteriormente son solo marcadores de posición; deberá modificarlas para que se ajusten a su página real.

Answer 2

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

Ejemplo html:

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

No se puede, los elementos de posición fija están separados de sus contenedores, position: relative o sin position: relative . Simplemente establece su ancho en un valor absoluto: parece que tu contenido siempre tiene 760 píxeles de ancho, ¿verdad?

Answer 4

position:fixed trabajos position:fixed como position:absolute por lo que no se coloca 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>

Answer 5

La forma de hacerlo es con un segundo contenedor. No conozco 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 una envoltura adicional alrededor de mi barra lateral de navegación. Tengo tanto la etiqueta <nav> etiqueta <ul> para trabajar. Puede usar cualquier etiqueta que desee, siempre que la barra lateral tenga dos que se puedan usar para la estructura: la externa para un contenedor fijo y la interna para la 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;
}

Aclamaciones.