Establecer el ancho de un div “Posición: fijo” relativo al div principal

Intento dar un div (posición: fijo) del ancho del 100% (relacionado con su div principal). Pero tengo algunos problemas …

EDITAR: El primer problema se sopló mediante el uso de heredar, pero todavía no funciona. Creo que el problema es que estoy usando varios divs que toman el ancho 100% / inherit. Puede encontrar el segundo problema en la actualización jsfiddle: http://jsfiddle.net/4bGqF/7/

Ejemplo de Fox

#container { width: 800px; } #fixed { position: fixed; width: 100%; } 

y el html

 
Sitename

blaat

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

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

No puedo asignar un elemento fijo a mi elemento fijo 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. Esto es solo un ejemplo, así que realmente no importa.

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 en una solución de JavaScript para los navegadores que necesita para apoyar y que no admiten width:inherit

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

Como mucha gente ha comentado, el diseño receptivo a menudo establece el ancho en%

width:inherit heredará el ancho de CSS NO el ancho calculado , lo que significa que el contenedor secundario heredará el width:100%

Pero, creo, casi con la misma frecuencia el diseño receptivo establece max-width también, por lo tanto:

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

Esto funcionó muy satisfactoriamente para resolver mi problema de hacer que un menú adhesivo se restrinja al ancho padre original siempre que se “atasque”

Tanto el padre como el hijo se adherirán al width:100% si la ventana gráfica es menor que el ancho máximo. Del mismo modo, ambos se adherirán al max-width:940px cuando la ventana max-width:940px sea ​​más ancha.

Funciona con mi tema ya sensible de una manera que puedo alterar el contenedor padre sin tener que alterar también el elemento fijo del niño: elegante y flexible

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

También puedes resolverlo por jQuery:

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

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

El posicionamiento fijo se supone que 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 infantil en su lugar. (Me doy cuenta de que podría necesitar el posicionamiento fijo por otras razones, pero si es así, no puede hacer que el ancho coincida con el de su matriz sin JS sin inherit )

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

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

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

 -webkit-transform: translateZ(0); 

Este es el truco que he usado.

Por ejemplo, tuve este HTML:

 
123

y para hacer #fx arreglado dentro de .head, entonces la solución es agregar un div adicional como contenedor para #fx con posición: absoluta como esta:

 
123

Aquí está el CSS:

 .head { min-width:960px; width:960px; nax-width:1400px; height:300px; border: 1px solid #000; position:relative; margin:0 auto; margin-top:50px; padding:20px; text-align:right; height:1500px; } .area_for_fix { position:absolute; right:0; width:150px; height:200px; background-color:red; } #fx { width:150px; height:75px; background-color:#ccc; position:fixed; } 

Importante : para no establecer la top e left para #fx , establezca estos atributos en .area_for_fix .

Hay una solución fácil para esto.

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

No necesita pensar demasiado sobre otros contenedores porque la posición fija solo es relativa a 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; } 
 
This is my content