问题:
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>