Question

我正在尝试创建一个布局 - 左侧浮动div与垂直视频/扬声器/信息div和右侧浮动div与章节 - 其中章节和信息的容器都覆盖其余剩余高度，垂直滚动。

可以在http://codepen.io/westis/pen/NPLwmy找到示例布局，下面是HTML和CSS。嵌入式视频只是一个视频示例。

html, body {
  font-family: arial, helvetica;
  height: 100%;
  margin: 0;
}
.title {
  font-size: 1.5em;
  padding: 0.5em;
  margin-top: 0;
  margin-bottom: 1em;
  border-bottom: 3px solid #000;
  text-transform: uppercase;
}
.main-container {
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
}
.left {
  width: 59%;
  margin-right: 2%;
  float: left;
  flex-direction: column;
  display: flex;
  position:relative;
  flex-grow: 1;
}
.right {
  float: right;
  width: 39%;
  background: #ff8100;
  flex-direction: column;
  display: flex;
  position:relative;
  flex-grow: 1;
}
.video {
  position: relative;
  padding-bottom: 57.25%;
  padding-top: 25px;
  height: 0;
  z-index: 99;
  flex: 1 1 auto;
}
.video iframe, .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.speaker-container {
  display: block;
  width: 100%;
  flex: 1 0 auto;
  background: #ccc;
}
.speaker {
  display: block;
  float: left;
  padding: 0.5em;
  line-height: 1.5em;
}
.main-container h2 {
  font-size: 1.5em;
  line-height: 1.5;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}
.info-container {
  overflow-y: auto;
  flex: 1 0.5 auto;
  margin-top: 1em;
}
.info {
  background: #739bd2;
  padding: 0.5em;
}
.chapter-container {
  min-height: 200px;
  overflow-y: auto;
}
.chapter-list {
  padding: 0;
  border-bottom: 1px solid #444;
  margin: 0;
  list-style: none;
}
.chapter {
  display: block;
}
.chapter a {
  padding: 0.5em 1em;
  border-top: 1px solid #000;
  text-decoration: none;
  color: #000;
  display: block;
}
h2 {
  flex: 0 0 auto;
}
footer {
  clear: both;
  background: #000;
  color: #fff;
  padding: 1em;
}

<h1 class="title">Agenda title</h1>
<div class="main-container">
  <div class="left">
    <div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/lbtxvWsNERY?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
    <div class="speaker-container">
      <div class="speaker">Some name
    </div>
    </div>
    <div class="info-container">
      <div class="info scrollbox">
        <h2 class="info-title">Chapter 1</h2>
        <div class="info-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at lobortis sapien. Vivamus lacinia egestas diam et faucibus. Curabitur ac mi fermentum, sodales arcu a, consectetur ipsum. Cras blandit lorem quis erat viverra, at iaculis enim consectetur. Vestibulum vel fermentum erat. Nam at justo ac elit pellentesque semper. Vivamus fringilla mattis nisl ut convallis. Nullam urna sem, pharetra sit amet hendrerit convallis, facilisis sed tortor. Integer suscipit hendrerit sollicitudin. Phasellus tristique orci enim, sit amet varius nulla faucibus quis.</p>
        <p>Fusce massa quam, eleifend a ligula ut, porttitor suscipit turpis. Fusce id metus vitae nisi efficitur consequat in vitae arcu. Phasellus euismod hendrerit euismod. Vivamus maximus, nibh in dignissim viverra, massa eros lobortis lorem, at mollis elit purus at felis. Sed iaculis sed lacus a tristique. Mauris porta sodales massa, vel ultricies eros tristique a. Phasellus dolor justo, porta egestas elementum nec, interdum ut orci. Donec id orci nisl. Quisque sed erat nisi. Etiam ultrices nulla sit amet augue ultrices, ut ornare urna mattis.</p>
        <p>Sed tortor ante, bibendum nec justo vel, efficitur tincidunt ex. Vestibulum condimentum neque et tincidunt dignissim. Maecenas eu erat ligula. Morbi quis dui a tortor hendrerit euismod. Aenean nibh odio, maximus sed nibh vitae, sagittis egestas sem. Fusce sapien nulla, malesuada molestie eros et, tristique lobortis libero. Quisque eget purus tortor. Sed eros odio, ultrices id ornare non, varius eu tellus. Morbi ante lectus, aliquam fermentum ligula sed, hendrerit luctus turpis. Duis sem neque, tincidunt ut gravida nec, lobortis at eros. Proin ullamcorper dui eu feugiat egestas. Nulla facilisi. Suspendisse a mollis arcu.</p></div>
      </div>
    </div>
  </div>
  <div class="right">
    <h2>Chapters</h2>
    <div class="chapter-container">
      <ul class="chapter-list">
        <li class="chapter"><a href="#">chapter 1</a></li>
        <li class="chapter"><a href="#">chapter 2</a></li>
        <li class="chapter"><a href="#">chapter 3</a></li>
        <li class="chapter"><a href="#">chapter 4</a></li>
        <li class="chapter"><a href="#">chapter 5</a></li>
        <li class="chapter"><a href="#">chapter 6</a></li>
        <li class="chapter"><a href="#">chapter 7</a></li>
        <li class="chapter"><a href="#">chapter 8</a></li>
        <li class="chapter"><a href="#">chapter 9</a></li>
        <li class="chapter"><a href="#">chapter 10</a></li>
        <li class="chapter"><a href="#">chapter 11</a></li>
        <li class="chapter"><a href="#">chapter 12</a></li>
        <li class="chapter"><a href="#">chapter 13</a></li>
        <li class="chapter"><a href="#">chapter 14</a></li>
        <li class="chapter"><a href="#">chapter 15</a></li>
        <li class="chapter"><a href="#">chapter 16</a></li>
        <li class="chapter"><a href="#">chapter 17</a></li>
        <li class="chapter"><a href="#">chapter 18</a></li>
        <li class="chapter"><a href="#">chapter 19</a></li>
        <li class="chapter"><a href="#">chapter 20</a></li>
      </ul>
    </div>
  </div>
</div>
<footer>Some footer</footer>

使用flex我或多或少地完成了我想要的东西。但我的问题是：

是否可以将最小高度设置为flex-item，以便设置flex 容器增加超过100％？就像现在一样，信息视频和扬声器容器下面的容器消失了浏览器不够高。
此外，我似乎需要将flex-shrink设置为0 扬声器容器div，否则它并不总是显示。但当降低浏览器高度，这意味着 speaker-container（flex item）显示在页脚顶部。怎么样我可以避免吗？
CSS flexbox在IE 10及更低版本中无法正常运行的问题意味着我不能为那些人完成这种布局浏览器？有些用户会使用IE9 / IE10，所以我要么需要后备，要么他们必须只接受页面滚动。

在弹性项目上增加具有最小高度的弹性容器的高度

0 个答案: