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

137

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.

Dnns
fonte
veja minha resposta abaixo que oferece alguns esclarecimentos adicionais sobre inherite como usar max-width:inheritcom width:inheritmantém o recipiente / relação continha o mesmo enquanto ainda está sendo ágil e gerenciável
aequalsb

Respostas:

120

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

jeroen
fonte
4
+1 para uma solução fantasticamente simples, embora width: inheritnão é a primeira coisa que eu teria pensado
Bojangles
7
Que feitiçaria é essa ?! +1
Nicu Surdu
7
Alguma idéia de como resolver isso se a #container width for 50% dentro de uma div com width = 100px (a largura do contêiner seria 50px e a largura fixa seria 50% da largura do navegador)?
Kek
113
O truque para herdar a largura do pai só funciona se o pai tiver uma largura definida em px.
jahu
33
Essa é uma resposta muito ruim ... É basicamente o equivalente a definir valores constantes, o que não é muito útil.
21416 Jay
33

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

aequalsb
fonte
Ótima resposta! No meu caso, adicionar um min-width: inheritfez o truque.
Bruno Monteiro
Isso funciona para elementos pai com larguras definidas como px e porcentagem. Deve ser a resposta correta na minha opinião.
Mikel
24

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

Multicam
fonte
11

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!

Hakan Fıstık
fonte
1
resposta ruim, se você redimensionar a janela, isso será quebrado.
21416 Jay
2
Realmente deve ter um manipulador de eventos window.onresize.
Twistedpixel #
Esta é a maneira de fazer. Poderia ser envolvido em uma setWidth function (), em seguida, chamá-lo sobre a "carga" e "Redimensionar" janela ouvintes de eventos
Woodz
Isto funcionou bem para mim! Corri para um problema em que o pai era largura: 25%, ao fazer width: herdar, cada largura era filho: 25%.
Troy Riemer 27/02
10

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.

banrobert
fonte
1
exceto IE6-7 não suporta inherit. Não tenho certeza se esse mattesr.
Thomas Shields
Muito obrigado. Funciona quando tento no exemplo, mas não no meu código ... Enfim, é uma resposta à pergunta que fiz aqui. Provavelmente há outra razão pela qual não funciona ... Mas ainda assim, obrigado!
Dnns
6

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)

Thomas Shields
fonte
1
@Downvoter - você pode explicar, por favor? Não tenho nenhum problema com um voto negativo, mas gosto de saber por que, para poder melhorar minhas respostas no futuro.
Thomas Shields
1
Sua explicação é boa, no entanto, você disse: "você realmente não pode fazer a largura corresponder à sua largura sem pai" Embora seja possível em alguns casos (usando herdar).
Dnns
Ah, claro. Eu tinha esquecido sobre herdar como eu alvo muito o IE e apenas o IE9 + suporta isso.
Thomas Shields
1
até a Microsoft quer que o IE desapareça - considerando a idade deste post original, acho seguro dizer que o problema do IE é discutível. se for altamente recomendável não oferecer suporte ao IE, A menos que você esteja cobrando especificamente por esse suporte - e a cada hora!
precisa saber é
3

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);
Senica Gonzalez
fonte
2
Isso corrige o problema de largura, mas tornou o filho não corrigido em relação à viewport.
Vivek Maharajh 13/09/16
Desculpe pelo voto negativo, pois isso derrota completamente o objetivo da posição: fixo.
trusktr
Eu não acho que você leu a pergunta. Diz, como você faz uma div "relativa" a um pai com posição "fixa". DEMASIADO é a posição anti-fixa. E minha resposta diz claramente "hackear". Não anula o objetivo quando o aproxima da solução.
Senica Gonzalez
1

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>

Sab Devadasan
fonte
1

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>

Skeets
fonte
0

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>

Khachik
fonte