34 votos

Establecer el ancho de un "Position: fixed" div en relación a los padres div

Estoy tratando de dar un div (position: fixed) el ancho de 100% (en lo que concierne a su padre div). Pero tengo algunos problemas...

EDITAR: El primer problema es sovled mediante el uso de heredar, pero aún así no funciona. Creo que el problema es que estoy usando varios divs que tomar el 100%/inherit ancho. Usted puede encontrar el segundo problema en el jsfiddle actualización: http://jsfiddle.net/4bGqF/7/

Fox ejemplo

#container {
    width: 800px;
}

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

y el html

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

O usted puede probar: http://jsfiddle.net/4bGqF/

Los problemas parece ser que el elemento fijo es siempre tomando en cuenta el ancho de la ventana de documento. ¿Alguien sabe cómo solucionar este problema?

Yo no puedo dar mi elemento fijo fijo, porque estoy usando el jScrollPane plugin. Depende del contenido si hay una barra de desplazamiento o no.

Muchas gracias!

PS: El texto de los 2 divs son en la parte superior de uno al otro. Este es sólo un ejemplo de lo que en realidad no importa.

35voto

jeroen Puntos 47068

No estoy seguro de cuál es el segundo problema es que (según la edición), pero si se aplican width:inherit a todos los interiores de la vid, funciona: http://jsfiddle.net/4bGqF/9/

Es posible que desee buscar en un javascript solución para los navegadores que usted necesita para apoyar y que no apoyan width:inherit

7voto

banrobert Puntos 125

El uso de este CSS:

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

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

El #elemento fijo se heredan de padres de ancho, por lo que será el 100% de eso.

6voto

Thomas Shields Puntos 5820

Fija el posicionamiento se supone que definir todo en relación a la ventanilla, por lo position:fixed siempre va a hacer eso. Trate de usar position:relative sobre el div hijo en su lugar. (Me doy cuenta de que usted puede ser que necesite el fijo de posicionamiento por otras razones, pero si es así - realmente no se puede hacer que la anchura partido es de los padres con JS sin inherit)

2voto

Evgeniy Puntos 1916

Aquí está el truco que he utilizado.

E. g. Yo tenía este código HTML:

<div class="head">

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

</div>

y para hacer #fx fijado en el interior .la cabeza, por lo que la solución es agregar un div como un contenedor para #fx con position:absolute como este:

<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: no se establece top y left para #fx, el conjunto de estos atributos en .area_for_fix.

1voto

Senica Gonzalez Puntos 2180

He aquí un pequeño hack que le encontré mientras que la fijación de algunos problemas de actualización en una aplicación de gran tamaño.

Uso -webkit-transform: translateZ(0); en el de los padres. Por supuesto, esto es específico para Chrome.

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

-webkit-transform: translateZ(0);

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X