如何在没有指定高度的情况下仅滚动第二个 div

Question

我有一个带有 2 个 div 的 HTML 页面。第一个我需要它包含一个具有 100% 宽度和自动高度的图像（以保持纵横比）。第二个包含一个列表。我只想滚动列表并保持图像可见。这是我试过的小提琴。但似乎没有任何效果。我真的认为有一个简单的解决方案，但我的 CSS 技能处于初学者水平。我试过了，style="/* overflow: auto; */position: relative;/* height: 100%; */但没有运气

LE：我希望列表在图像之后开始 - 所以滚动将在图像之后的某个地方开始

Answer 1

Flexbox做得很好（如果支持）：

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 的A Complete Guide to Flexbox可能很有用。