Definir a largura de uma div "Posição: fixa" em relação à div pai

Eu estou tentando dar a uma div (position: fixed) a largura de 100% (relativa à div principal). Mas eu tenho alguns problemas ...

Edição: O primeiro problema é resolvido usando herdar, mas ainda não funciona. Eu acho que o problema é que eu estou usando várias divs que levam a largura de 100% / herdar. Você pode encontrar o segundo problema na atualização do jsfiddle: http://jsfiddle.net/4bGqF/7/

Fox exemplo

#container {
    width: 800px;
}

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

e o html

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

Ou você pode experimentá-lo: http://jsfiddle.net/4bGqF/

Os problemas parecem ser que o elemento fixo está sempre ocupando a largura da janela / documento . Alguém sabe como corrigir isso?

Não posso fixar meu elemento fixo porque estou usando o plugin jScrollPane. Depende do conteúdo, se há uma barra de rolagem ou não.

Muito obrigado!

PS: O texto das 2 divs está em cima da outra. Este é apenas um exemplo para que realmente não importe.

Não sei ao certo qual é o segundo problema (com base na sua edição), mas se você aplicar width:inherita todas as divs internas, ele funcionará: http://jsfiddle.net/4bGqF/9/

Você pode procurar uma solução javascript para navegadores que você precisa e que não oferece suporte width:inherit

Como muitas pessoas comentaram, o design responsivo frequentemente define a largura em%

width:inheritherdará a largura do CSS, NÃO a largura calculada - o que significa que o contêiner filho herdawidth:100%

Mas, penso eu, com a mesma frequência do design responsivo max-widthtambém, portanto:

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

Isso funcionou muito satisfatoriamente para resolver meu problema de fazer com que um menu fixo fosse restringido à largura original do pai sempre que ele "travava"

O pai e o filho aderem ao width:100%se a viewport for menor que a largura máxima. Da mesma forma, ambos irão aderir ao max-width:800pxquando a janela de visualização for mais ampla.

Ele funciona com meu tema já responsivo de uma maneira que eu possa alterar o contêiner pai sem precisar também alterar o elemento filho fixo - elegante e flexível

ps: Eu pessoalmente acho que não importa nem um pouco que o IE6 / 7 não use inherit

posição fixa é um pouco complicada (de fato impossível), mas posição: pegajosa está fazendo o truque lindamente:

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

veja a amostra codepen

Você também pode resolvê-lo usando o jQuery:

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

Isso foi muito útil para mim, porque meu layout era responsivo e a inheritsolução não estava funcionando comigo!

Use este CSS:

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

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

O elemento #fixed herdará sua largura pai, portanto será 100% disso.

O posicionamento fixo deve definir tudo em relação à viewport, portanto, position:fixedsempre será feito. Tente usar position:relativea div filho em vez disso. (Sei que você pode precisar do posicionamento fixo por outros motivos, mas se assim for - você não pode realmente fazer a largura corresponder ao pai sem JS sem inherit)

Aqui está um pequeno truque que encontramos ao corrigir alguns problemas de redesenho em um aplicativo grande.

Use -webkit-transform: translateZ(0);no pai. Claro que isso é específico para o Chrome.

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

-webkit-transform: translateZ(0);

Existe uma solução fácil para isso.

Eu usei uma posição fixa para div principal e uma largura máxima para o conteúdo.

Você não precisa pensar muito em outros contêineres porque posição fixa apenas em relação à janela do 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 solução atende aos seguintes critérios

1. A largura da porcentagem é permitida no pai
2. Funciona após o redimensionamento da janela
3. O conteúdo abaixo do cabeçalho nunca fica inacessível

Tanto quanto sei, esse critério não pode ser atendido sem Javascript (infelizmente).

Esta solução usa jQuery, mas também pode ser facilmente convertida em JS vanilla:

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>

Você precisa fornecer o mesmo estilo do elemento fixo e seu elemento pai. Um desses exemplos é criado com larguras máximas e, no outro exemplo, com preenchimentos.

* {
  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>