jquery - para - Establecer el ancho de un div "Posición: fijo" relativo al div principal

librerias jquery

Question

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

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

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.

Answer 1

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

Answer 2

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:940px;
}
#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

Answer 3

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 )

Answer 4

Este es el truco que he usado.

Por ejemplo, tuve este HTML:

<div class="head">
    <div id="fx">123</div>
</div>

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:

<div class="head">
    <div class="area_for_fix">
        <div id="fx">123</div>
    </div>
</div>

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 .

Answer 5

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

<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

Answer 6

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

Answer 7

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!

Answer 8

Tenga en cuenta que la position:fixed no parece jugar bien con la right y la left . Si el css original de su elemento es position:absolute; right:0; position:absolute; right:0; y cambia la posición por fija a través de un script, también debe establecer right:auto y colocar su elemento de otra manera si desea que permanezca dentro del ancho del elemento contenedor.

Me doy cuenta de que esto no aborda directamente el violín en la pregunta original, pero espero que sea útil para alguien que solucione el problema básico.

Answer 9

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.