Question

我正在尝试在HTML5 / CSS3中实现一个图像框，在全屏灯箱中显示图像及其描述。我的问题是，我希望屏幕底部的描述具有动态高度（即我不希望剪切描述）和图像占用剩余空间，约束到最大宽度和最大高度为剩余空间的100％。

我的问题有点像“动态高度粘脚”问题，除了整个内容应始终有100％的高度，不多也不少。

由于动态高度，我尝试使用“表格行技术”来解决问题：请参阅http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/以获取解释。但是我不能让它发挥作用。大图像使得表格超出界限，或者我无法强制描述在图像之前“获取”其高度。在这里看到我的小提琴：https://jsfiddle.net/sprat/ho463toa/

.content { display: table; width: 100%; table-layout: fixed; /* does not work with, does not work without either */ } .image-area { display: table-row; height: 1px; } .description-area { display: table-row; height: auto; }

所以我需要一些帮助。如果可能的话，我正在寻找一个纯CSS解决方案。也许这可以用flexbox完成，但我有点担心浏览器的支持。有什么想法吗？

Answer 1

我建议使用flexbox进行布局。有了前缀，它支持IE10 +。

它使用背景图像而不是内嵌图像。

<强> jsFiddle example

＆＃13;

html, body { height: 100%; }
body { margin: 0; }
img {
  max-width: 100%;
  max-height: 100%;
}
p {
  margin: 0;
}
.fullscreen {
  position: fixed;
  left: 20px; right: 20px; top: 20px; bottom: 20px;
}
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.image-area {
  flex: 1;
  position: relative;
}
.image-area:after {
  content: "";
  display: block;
  background: url('//dummyimage.com/1000') center / cover;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
}
.description-area {
  background: lightblue;
}

＆＃13;

<div class="fullscreen">
  <div class="content">
    <div class="image-area">
      <!-- <img src="http://img0.mxstatic.com/wallpapers/f424924e12f269c3dfd65e5be8cda9ba_large.jpeg"> -->
    </div>
    <div class="description-area">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue et ante id sodales. Etiam mollis neque nisi, id maximus tellus condimentum a. Duis condimentum erat quis ligula maximus mollis. Morbi congue, nunc sit amet suscipit consectetur,
        enim tortor lobortis felis, eget aliquam sem tortor quis augue. Duis ac viverra urna, non scelerisque leo. Nam vel dolor risus. Duis feugiat vulputate neque id fermentum. Aenean rhoncus libero ipsum, commodo vulputate dui commodo a. Maecenas sit
        amet pulvinar orci. Proin dapibus dui vel justo vulputate, a aliquam dui rhoncus. Phasellus lacinia venenatis leo, vel facilisis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer erat ipsum, pharetra
        ac tempor et, viverra et nibh.</p>
    </div>
  </div>
</div>

＆＃13;

有用的链接：

第二个元素的全屏和自动高度

1 个答案: