Establecer el ancho de un div "Posición: fijo" relativo al div primario


137

Estoy tratando de dar un div (posición: fija) del ancho del 100% (en relación con su div padre). Pero tengo algunos problemas ...

EDITAR: El primer problema se soluciona mediante el uso de la herencia, pero aún no funciona. Creo que el problema es que estoy usando múltiples divs que toman el 100% / ancho de herencia. 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 puede 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, 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án uno encima del otro. Este es solo un ejemplo, así que eso realmente no importa.


vea mi respuesta a continuación, que ofrece información adicional sobre inheritcómo usar max-width:inheritcon width:inheritmantiene la relación contenedor / contenido igual mientras sigue siendo receptivo y manejable
aequalsb

Respuestas:


120

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

Es posible que desee buscar una solución de JavaScript para los navegadores que necesita admitir y que no admiten width:inherit


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

77
¡¿Que brujería es esta?! +1
Nicu Surdu

77
¿Alguna idea de cómo resolver esto si # ancho del contenedor es 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

113
El truco para heredar el ancho del padre solo funciona si el padre tiene un ancho establecido en px.
jahu

33
Esta es una respuesta bastante mala ... Básicamente es el equivalente a establecer valores constantes, lo cual no es muy útil en absoluto.
Jay

33

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

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

Pero, creo, también casi a menudo conjuntos de diseño receptivo max-width, 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ú fijo se restringiera al ancho original del padre cada vez que se "atascaba"

Tanto el padre como el hijo se adherirán a width:100%si la ventana gráfica es menor que el ancho máximo. Del mismo modo, ambos se adherirán a max-width:800pxcuando la ventana gráfica sea 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


¡Gran respuesta! En mi caso, agregar un min-width: inherithizo el truco.
Bruno Monteiro

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

24

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


11

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 era receptivo y la inheritsolución no funcionaba conmigo.


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

2
Realmente debería tener un controlador de eventos window.onresize.
Twistedpixel

Esta es la forma de hacerlo. Podría incluirse en una función setWidth (), luego llamarla en los oyentes de eventos de ventana "cargar" y "cambiar tamaño"
woodz

¡Esto funcionó bien para mí! Me encontré con un problema en el que el padre era ancho: 25%, por lo que hacer ancho: heredar hizo que cada hijo ancho: 25%.
Troy Riemer

10

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


1
excepto que IE6-7 no es compatible inherit. No estoy seguro si eso importa.
Thomas Shields

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

6

Se supone que el posicionamiento fijo define todo en relación con la ventana gráfica, por position:fixedlo que siempre lo hará. Intente usar position:relativeen el niño div en su lugar. (Me doy cuenta de que puede necesitar 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)


1
@Downvoter: ¿puedes explicarlo, por favor? No tengo ningún problema con un voto negativo, pero me gusta saber por qué para poder mejorar mis respuestas en el futuro.
Thomas Shields

1
Tu explicación está bien, sin embargo dijiste "realmente no puedes hacer que el ancho coincida con su padre sin JS". Aunque es posible en algunos casos (mediante el uso de la herencia).
Dnns

Oh por supuesto. Me había olvidado de heredar ya que me dirijo a IE mucho y solo IE9 + lo admite.
Thomas Shields

1
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 se recomienda encarecidamente no admitir IE A MENOS QUE esté facturando específicamente por dicho soporte, ¡y por horas!
aequalsb

3

Aquí hay un pequeño truco con el que nos encontramos al solucionar algunos problemas de redibujo en una aplicación grande.

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

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

-webkit-transform: translateZ(0);

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

Perdón por el voto negativo, ya que esto derrota por completo el propósito de la posición: fijo.
trusktr

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

1

Hay una solución fácil para esto.

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

No necesita pensar demasiado en otros contenedores porque la posición fija solo está relacionada 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>


1

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 sé, este criterio no se puede cumplir sin Javascript (desafortunadamente).

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

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>


0

Debe dar el mismo estilo del elemento fijo y su elemento principal. Uno de estos ejemplos se crea con anchuras máximas 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>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.