高さが指定されていない2番目のdivのみをスクロールする方法

Question

私は2つのdivでHTMLページを持っています。最初の1つは、100％の幅と自動高さ（アスペクト比を維持するため）を持つ画像を格納するのに必要なものです。 2番目にはリストが含まれています。 リストだけをスクロールして、画像を表示したままにします。 これはthe fiddle that I tried.ですが、何も動作していないようです。 私は実際には単純な解決策があると思いますが、私のCSSスキルは初心者レベルです。私はstyle="/* overflow: auto; */position: relative;/* height: 100%; */を試していないが、運

LE：私は、リストには、画像後に開始したい - そう画像

Answer 1

は位置にあなたのイメージのための位置属性を変更しようとした後、スクロールがどこかで開始します：固定します; それはここでは、この

あなたは第二のdivに固定高さの値を追加する必要がありと設定されます

Answer 2

overflow-y: auto

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

Answer 3

のように動作するはずです：https://jsfiddle.net/p3aw8xu0/

をあなたは作るためにposition: fixedを使用する必要がありますdivはスクロールせずにページの一部に固執します。

また、画像をbackground-imageとして使用することをお勧めします。

Answer 4

Flexboxは、この井戸（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>

クリスCoyierのA Complete Guide to Flexboxは有用であろう。