Establecer el ancho de un div "Posición: fijo" en relación con el div principal

Estoy tratando de darle a un div (posición: fijo) el ancho del 100% (en relación con su div principal). Pero tengo algunos problemas ...

EDIT: El primer problema se soluciona usando herencia, pero aún no funciona. Creo que el problema es que estoy usando múltiples divs que toman el 100% / heredan el ancho. Puede encontrar el segundo problema en la actualización de jsfiddle: http://jsfiddle.net/4bGqF/7/

Ejemplo de Fox

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

y el html

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

O puedes probarlo: http://jsfiddle.net/4bGqF/

El problema parece ser que el elemento fijo siempre toma el ancho de la ventana / documento. ¿Alguien sabe cómo solucionar esto?

No puedo darle a mi elemento fijo un fijo con, porque estoy usando el complemento jScrollPane. Depende del contenido si hay una barra de desplazamiento o no.

¡Muchas gracias!

PD: El texto de los 2 divs está uno encima del otro. Este es solo un ejemplo, por lo que realmente no importa.

preguntado el 03 de mayo de 11 a las 14:05

vea mi respuesta a continuación, que ofrece información adicional sobre inherit y como usar max-width:inherit a width:inherit mantiene la proporción contenedor / contenido igual sin dejar de ser receptivo y manejable -

11 Respuestas

No estoy seguro de cuál es el segundo problema (basado en su edición), pero si aplica width:inherit a todos los divs internos, funciona: http://jsfiddle.net/4bGqF/9/

Es posible que desee buscar una solución de javascript para navegadores que necesite admitir y que no admitan width:inherit

contestado el 03 de mayo de 11 a las 20:05

+1 para una solución fantásticamente simple, aunque width: inherit no es lo primero en lo que hubiera pensado - Bojangles

¿Alguna idea de cómo resolver esto si el # ancho del contenedor es del 50% dentro de un div con ancho = 100 px (entonces el ancho del contenedor sería 50 px y el ancho fijo sería el 50% del ancho del navegador)? - Kek

El truco de heredar el ancho del padre solo funciona si el padre tiene un ancho establecido en px. - Jahu

Esta es una respuesta bastante mala ... Es básicamente el equivalente a establecer valores constantes, lo cual no es muy útil en absoluto. - arrendajo

¿Cómo se resuelve esto si el contenedor está usando un ancho en%? - Vinícius Fagundes

Como muchas personas han comentado, el diseño receptivo a menudo establece el ancho en%

width:inherit heredará el Ancho CSS No la ancho calculado - Lo que significa que el contenedor secundario hereda width:100%

Pero creo que casi con tanta frecuencia los conjuntos de diseño receptivos max-width también, por lo tanto:

#container {
    width:100%;
    max-width:800px;
}
#contained {
    position:fixed;
    width:inherit;
    max-width:inherit;
}

Esto funcionó de manera muy satisfactoria para resolver mi problema de hacer que un menú pegajoso se restringiera al ancho original del padre cada vez que se "atascaba"

Tanto el padre como el niño se adherirán a las width:100% si la ventana gráfica es menor que el ancho máximo. Asimismo, ambos se adherirán a la max-width:800px cuando la ventana es más ancha.

Funciona con mi tema ya receptivo de una manera que puedo alterar el contenedor principal sin tener que alterar también el elemento secundario fijo: elegante y flexible

ps: personalmente creo que no importa un poco que IE6 / 7 no use inherit

Respondido 05 Oct 18, 20:10

¡Gran respuesta! En mi caso, agregando un min-width: inherit Hizo el truco. - Bruno Monteiro

Esto funciona para elementos padres con anchos definidos como px y porcentaje. Debería ser la respuesta correcta en mi opinión. - Mikel

la posición fija es un poco complicada (de hecho imposible), pero la posición: pegajosa está haciendo el truco maravillosamente:

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>



body {
  text-align: center;  
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

ver la muestra de codepen

contestado el 17 de mayo de 19 a las 06:05

¡Sticky hizo el trabajo! Gracias. - pk1557

¡Gracias! esto me ayudó !! - SABIO DIVISOR

También puedes resolverlo con jQuery:

var new_width = $('#container').width();
$('#fixed').width(new_width);

Esto fue muy útil para mí porque mi diseño fue receptivo y el inherit ¡La solución no funcionaba conmigo!

Respondido 10 Abr '17, 14:04

mala respuesta, si cambia el tamaño de la ventana, esto se rompe. - arrendajo

Realmente debería tener un controlador de eventos window.onresize. - píxel retorcido

Esta es la forma de hacerlo. Podría estar envuelto en una función setWidth (), luego llamarlo en los oyentes de eventos de ventana "load" y "resize" - Woodz

¡Esto funcionó bien para mí! Me encontré con un problema en el que el padre tenía un ancho: 25%, por lo que hacer ancho: heredar hizo que cada niño ancho: 25%. - troy riemer

Utilice este CSS:

#container {
    width: 400px;
    border: 1px solid red;
}

#fixed {
    position: fixed;
    width: inherit;
    border: 1px solid green;
}

El elemento #fixed heredará su ancho principal, por lo que será el 100% de eso.

contestado el 03 de mayo de 11 a las 18:05

excepto que IE6-7 no es compatible inherit. No estoy seguro de si eso importa. - escudos de thomas

Muchas gracias. Funciona cuando lo intento en el ejemplo pero no en mi código ... De todos modos, es una respuesta a la pregunta que hice aquí. Probablemente haya otra razón por la que no funciona ... Pero aún así, ¡gracias! - Dnns

No trabajar con elementos de bloque sin un ancho establecido explícitamente - tilik

Se supone que el posicionamiento fijo define todo en relación con la ventana gráfica, por lo que position:fixed siempre va a hacer eso. Intenta usar position:relative en el div hijo en su lugar. (Me doy cuenta de que es posible que necesite el posicionamiento fijo por otras razones, pero si es así, realmente no puede hacer que el ancho coincida con su padre sin JS sin inherit)

contestado el 03 de mayo de 11 a las 19:05

@Downvoter: ¿puedes explicarme, por favor? No tengo ningún problema con un voto negativo, pero me gustaría saber por qué para poder mejorar mis respuestas en el futuro. - escudos de thomas

Tu explicación está bien, sin embargo, dijiste "realmente no puedes hacer que el ancho coincida con el padre sin JS". Aunque es posible en algunos casos (usando heredar). - Dnns

Oh por supuesto. Me había olvidado de heredar, ya que apunto mucho a IE y solo IE9 + lo admite. - escudos de thomas

incluso Microsoft quiere que IE desaparezca; teniendo en cuenta la antigüedad de esta publicación original, creo que es seguro decir que el problema de IE es discutible. si recomiendo encarecidamente no admitir IE A MENOS QUE esté facturando específicamente por dicho soporte, ¡y por horas! - aequalsb

Aquí hay un pequeño truco que encontramos mientras solucionamos algunos problemas de redibujado en una aplicación grande.

Utilice la herramienta -webkit-transform: translateZ(0); en el padre. Por supuesto, esto es específico de Chrome.

http://jsfiddle.net/senica/bCQEa/

-webkit-transform: translateZ(0);

Respondido 10 Abr '17, 14:04

Esto soluciona el problema de ancho, pero hizo que el niño no se arreglara en relación con la ventana gráfica. - Vivek Maharaj

Perdón por el voto negativo, ya que esto anula por completo el propósito del puesto: fijo. - camionero

No creo que hayas leído la pregunta. Dice, ¿cómo se hace un div "relativo" a un padre con una posición "fija". ESO TAMBIÉN es una posición anti-fija. Y mi respuesta dice claramente, "piratear". No frustra el propósito cuando te acerca a tu solución. - Senica González

Existe una solución sencilla para esto.

He usado una posición fija para el div principal y un ancho máximo para el contenido.

No necesita pensar demasiado en otros contenedores porque la posición fija solo en relación con la ventana del navegador. 

       .fixed{
            width:100%;
            position:fixed;
            height:100px;
            background: red;
        }

        .fixed .content{
            max-width: 500px;
            background:blue;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }
<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

Respondido 14 Jul 17, 06:07

Esta solución cumple con los siguientes criterios

  1. El ancho porcentual está permitido en el padre
  2. Funciona después de cambiar el tamaño de la ventana
  3. El contenido debajo del encabezado nunca es inaccesible

Hasta donde yo sé, este criterio no se puede cumplir sin Javascript (desafortunadamente).

Esta solución usa jQuery, pero también podría convertirse fácilmente a Vanilla JS:

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

$(window).resize(function() {
  fixedHeader();
});

fixedHeader();
#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

Respondido el 10 de Septiembre de 18 a las 11:09

Debe dar el mismo estilo del elemento fijo y su elemento padre. Uno de estos ejemplos se crea con anchos máximos y en el otro ejemplo con rellenos. 

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}
<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>

Respondido el 12 de junio de 20 a las 16:06

Para el encabezado fijo con jquery, todavía soy un aprendiz en jquery, estas configuraciones css funcionaron.

header.sticky{
    position: fixed;
    border-radius: 0px;
    max-height: 70px;
    z-index: 1000;
    width: 100%;
    max-width: inherit;
}

El encabezado está dentro de un div contenedor que tiene un ancho máximo de 1024.

contestado el 02 de mayo de 21 a las 10:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.