Wie scrollt nur ein zweites div mit keiner Höhe

Question

Ich habe eine HTML-Seite mit 2 Divs. Die erste, die ich brauche, um ein Bild mit 100% Breite und automatischer Höhe zu enthalten (so dass das Seitenverhältnis beibehalten wird). Der zweite enthält eine Liste. Ich möchte nur die Liste scrollen und das Bild sichtbar halten. Das ist the fiddle that I tried. Aber nichts scheint zu funktionieren. Ich denke wirklich, dass es eine einfache Lösung gibt, aber meine CSS Skillz sind Anfänger. Ich habe versucht, style="/* overflow: auto; */position: relative;/* height: 100%; */ aber kein Glück

LE: Ich habe die Liste will, nachdem das Bild beginnen - so die Scroll wird irgendwo nach dem Bild

Answer 1

Versuch zu starten, die Position Attribut für Ihr Bild auf Position zu ändern: fixed; Es sollte wie arbeiten diese

Answer 2

Sie haben eine feste Höhe Wert zum zweiten div hinzuzufügen und setzen overflow-y: auto

https://jsfiddle.net/1a440uLa/2/

Answer 3

hier: https://jsfiddle.net/p3aw8xu0/

Sie haben position: fixed zu verwenden, um die machen div an einem Teil der Seite geklebt und nicht gescrollt.

Alternativ sollten Sie Ihr Bild wahrscheinlich als background-image verwenden.

Answer 4

Flexbox tut dies gut (where supported):

html,body,#wrapper {height: 100%; margin:0;} 
 
body {overflow: hidden;} 
 
#wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#header {flex: 0 0 auto;} 
 
#header img {width:100%} 
 
#content { 
 
    flex: 1 1 auto; 
 
    position: relative; 
 
    overflow-y: auto; 
 
}

<div id="wrapper"> 
 

 
    <div id="header"> 
 
     <img src="http://rockstartemplate.com/blogheaders/bannerdesign2.jpg" /> 
 
    </div> 
 

 
    <div id="content">  
 
     <ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul> 
 
    </div> 
 

 
</div>

Chris Coyier des A Complete Guide to Flexbox kann als nützlich erweisen.