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

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.

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

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

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

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.

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.

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)

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

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>

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>

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>