html - 如何仅滚动第二个没有指定高度的div

Question

我有一个包含 2 个 div 的 HTML 页面。第一个我需要它包含具有 100% 宽度和自动高度的图像(以便保持纵横比)。第二个包含一个列表。我只想滚动列表并保持图像可见。这是the fiddle that I tried.但似乎没有任何作用。我确实认为有一个简单的解决方案，但我的 CSS 技能还处于初学者水平。我尝试了 style="/* Overflow: auto; */position:relative;/* height: 100%; */ 但没有运气

LE:我希望列表在图像之后开始 - 因此滚动将在图像之后的某个位置开始

Answer 1

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>

克里斯·科伊尔的 A Complete Guide to Flexbox可能会被证明是有用的。