Image prevents flex item from stretching to bottom of screen

问题: I'm trying to define a two column layout using flexbox where the first column has an image and both columns have different background colors. I'd like both columns to stret...

问题:

I'm trying to define a two column layout using flexbox where the first column has an image and both columns have different background colors. I'd like both columns to stretch to the bottom of the window.

However, I get a white space at the bottom of the right column whenever I resize the browser window to a low enough height.

Here's an example of the behavior. In this case I'd like the red column to extend all the way down to bottom of the screen.

Any suggestions on how to fix this? I'd like to prevent stretching the image too much.

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left {
  background: lightblue;
  flex: 2;
}

.left img {
  max-width: 650px;
  width: 100%;
}

.right {
  background: lightcoral;
  flex: 1;
}
<div class="container">
  <div class="left">
    <img src="http://via.placeholder.com/400x400" />
  </div>
  <div class="right">
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
  </div>
</div>


回答1:

Use min-height: 100vh; on the container class, so it does not shrink when window height is smaller than the image height

html,
body {
  height: 100vh;
  max-height:100%;
}

body {
  margin: 0;
}

.container {
  display: flex;
  min-height: 100vh;
}

.left {
  background: lightblue;
  flex: 2;
}

.left img {
  max-width: 650px;
  width: 100%;
}

.right {
  background: lightcoral;
  flex: 1;
}
<div class="container">
  <div class="left">
    <img src="http://via.placeholder.com/400x400" />
  </div>
  <div class="right">
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
  </div>
</div>

Hope this helps


回答2:

Removing the set height for body/height takes care of it.

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left {
  background: lightblue;
  flex: 2;
}

.left img {
  max-width: 650px;
  width: 100%
}

.right {
  background: lightcoral;
  flex: 1;
}
<div class="container">
  <div class="left">
    <img src="http://via.placeholder.com/400x400" />
  </div>
  <div class="right">
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
    <p>Some content.</p>
  </div>
</div>

  • 发表于 2018-07-06 03:29
  • 阅读 ( 275 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除