/ / Get div mit fester Position zum Auffüllen der Breite - html, css, css3, css-position

Get div mit fester Position zum Auffüllen der Breite - html, css, css3, css-position

Ich habe folgendes Setup:

<div id="sidebar"></div>
<div id="header"></div>
<div id="content">Hello World</div>

#sidebar {
float: left;
}
#sidebar ~ * {
overflow: hidden;
}

Dies ermöglicht die #sidebar das drücken #header und #content nach rechts und danach #header und #content nehmen Sie die volle Breite auf.

Was ich tun möchte, ist, dass die Kopfzeile oben auf dem Bildschirm fixiert wird, so dass die Seitenleiste weiterhin nach rechts drückt, aber beim Scrollen bleibt sie oben auf dem Bildschirm.

Mein naives Bestreben ist es einfach zu setzen #header { position: fixed }. Das funktioniert nicht; es verursacht die Breite des #header basierend auf seinen Kindern automatisch berechnet werden.

Also füge ich hinzu #header { width: 100% }. Das ist näher; Die Breite füllt den Bildschirm, wird aber nicht nach rechts verschoben #sidebar. Hinzufügen float: left hilft auch nicht.

Meine Einschränkungen sind:

  • Ich habe keine Kontrolle über #content und kann es nicht in ein anderes Tag einfügen, das ich kontrolliere
  • Ich weiß nicht, wie breit #sidebar ist

Kann ich dies mit CSS tun, ohne die Breite / Position von zu berechnen #sidebar in Javascript?

https://jsfiddle.net/vkL4s5Lz/1/

Antworten:

2 für die Antwort № 1

Der Trick besteht darin, den Header in einen Wrapper zu verpacken und dann die Position des Headers innerhalb des Wrappers zu fixieren.

<div>
<div id="header"></div>
</div>

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

https://jsfiddle.net/vkL4s5Lz/2/