Imposta la larghezza di un div “Posizione: fissa” rispetto al div principale

Sto cercando di dare a un div (posizione: fissa) l'ampiezza del 100% (rispetto al suo div parent). Ma ho dei problemi ...

EDIT: il primo problema è risolto utilizzando l'ereditarietà, ma non funziona ancora. Penso che il problema sia che sto usando più div che prendono la larghezza del 100% / eredita. Puoi trovare il secondo problema sull'aggiornamento di jsfiddle: http://jsfiddle.net/4bGqF/7/

Esempio di volpe

#container {
    width: 800px;
}

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

e l'html

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

Oppure puoi provarlo: http://jsfiddle.net/4bGqF/

Il problema sembra essere che l' elemento fisso assume sempre la larghezza della finestra / documento . Qualcuno sa come risolvere questo?

Non riesco a risolvere il problema con il mio elemento fisso, perché sto usando il plug-in jScrollPane. Dipende dal contenuto se c'è una barra di scorrimento o meno.

Molte grazie!

PS: il testo dei 2 div è sovrapposto. Questo è solo un esempio, quindi non importa.

Non sono sicuro di quale sia il secondo problema (basato sulla modifica), ma se si applica width:inherita tutti i div interni, funziona: http://jsfiddle.net/4bGqF/9/

Potresti voler cercare una soluzione JavaScript per i browser che devi supportare e che non supportano width:inherit

Come molte persone hanno commentato, il design reattivo spesso imposta la larghezza in%

width:inheriterediterà la larghezza CSS NON la larghezza calcolata - Il che significa che il contenitore figlio ereditawidth:100%

Ma, penso, quasi altrettanto spesso max-widthanche i set di design reattivo , quindi:

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

Questo ha funzionato in modo molto soddisfacente per risolvere il mio problema di rendere un menu appiccicoso limitato alla larghezza originale del genitore ogni volta che si "bloccava"

Sia il genitore che il figlio aderiranno al width:100%caso in cui la finestra sia inferiore alla larghezza massima. Allo stesso modo, entrambi aderiranno al max-width:800pxmomento in cui il viewport è più ampio.

Funziona con il mio tema già reattivo in modo da poter modificare il contenitore padre senza dover modificare anche l'elemento figlio fisso: elegante e flessibile

ps: personalmente penso che non importi un po 'che IE6 / 7 non usi inherit

la posizione fissa è un po 'complicata (davvero impossibile), ma posizione: appiccicoso sta facendo il trucco magnificamente:

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

vedi l'esempio codepen

Puoi anche risolverlo con jQuery:

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

Questo mi è stato di grande aiuto perché il mio layout era reattivo e la inheritsoluzione non funzionava con me!

Usa questo CSS:

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

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

L'elemento #fixed erediterà la sua larghezza padre, quindi sarà del 100%.

Il posizionamento fisso dovrebbe definire tutto in relazione al viewport, quindi lo position:fixedfarà sempre. Prova invece a utilizzare position:relativeil div bambino. (Mi rendo conto che potresti aver bisogno del posizionamento fisso per altri motivi, ma in tal caso - non puoi davvero fare in modo che la larghezza corrisponda al suo genitore senza JS senza inherit)

Ecco un piccolo trucco che abbiamo riscontrato durante la risoluzione di alcuni problemi di ridisegno su un'app di grandi dimensioni.

Utilizzare -webkit-transform: translateZ(0);sul genitore. Naturalmente questo è specifico per Chrome.

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

-webkit-transform: translateZ(0);

C'è una soluzione semplice per questo.

Ho usato una posizione fissa per il genitore div e una larghezza massima per i contenuti.

Non è necessario pensare troppo agli altri contenitori perché la posizione fissa è relativa solo alla finestra del browser.

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

Questa soluzione soddisfa i seguenti criteri

1. La larghezza percentuale è consentita sul genitore
2. Funziona dopo il ridimensionamento della finestra
3. Il contenuto sotto l'intestazione non è mai inaccessibile

Per quanto ne so, questi criteri non possono essere soddisfatti senza Javascript (purtroppo).

Questa soluzione utilizza jQuery, ma potrebbe anche essere facilmente convertita in JS vaniglia:

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>

Devi dare lo stesso stile dell'elemento fisso e del suo elemento padre. Uno di questi esempi viene creato con larghezze massime e nell'altro esempio con imbottiture.

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