Question

很难解释我想要的东西所以我画了一张照片。

所以基本上第一个div（外部div）有固定的高度。第三个div - 蓝色 - 包含一些我不知道高度的文本，因此div应该环绕文本，这意味着它具有可变高度。而第二个div - 绿色 - （应该填充剩余的高度）包含一个图像，该图像应缩小以适合div或者如果它更小则简单地对齐到底部。我遇到的问题是图像根本不想缩小。它将始终尝试为完整大小，并将文本推出div＃1。

我尝试用表格方法解决它但不知何故表忽略了外部div固定高度。我很喜欢使用flexbox解决方案，我希望避免它也支持旧浏览器。

我真的想用css来解决这个问题因为javascript只会使事情复杂化并使其更加滞后。

.navbar-text

.outer{
  width: 100%; 
  height: 200px; 
  background-color: lightgray;
  padding: 20px;
}

Answer 1

这是纯CSS的解决方案。

＆＃13;

.outer {
  display: flex;
  flex-direction: column;
  height: 200px;
  background-color: lightgray;
  padding: 20px;
}

.top {
  flex: 1;
  display: flex;
}

.top > img {
  width: 100%;
  object-fit: contain;
  object-position: left;
}

＆＃13;

<div class="outer">
  <div class="top">
    <img src="http://themeflush.com/minimalix/demo4/wp-content/uploads/2014/08/wallpapers-for-christian-background-tumblr-photography-vintage-images-tumblr-wallpapers.jpg">
  </div>
  <div class="bottom">
    <span>Title of the description</span>
    <p>This is a long description.</p>
  </div>
</div>

＆＃13;

jsFiddle demo

浏览器支持：所有主流浏览器except IE < 10均支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer中的更多详细信息。

参考文献：

Answer 2

这是一个使用display: table来最大化您的浏览器支持而不需要填充的解决方案。然而，它使用背景图像而不是图像..

.outer {
  box-sizing: border-box;
  display: table;
  width: 100%;
  height: 200px;
  background-color: lightgray;
  padding: 20px;
}

.top {
  background-size: contain;
  background-repeat: no-repeat;
  display: table-cell;
  height: 100%;
}

.bottom {
  display: table-row;
}

<div class="outer">
  <div class="top" style="background-image: url(http://themeflush.com/minimalix/demo4/wp-content/uploads/2014/08/wallpapers-for-christian-background-tumblr-photography-vintage-images-tumblr-wallpapers.jpg)">
  </div>
  <div class="bottom">
    <span>Title of the description</span>
		<p>This is a long description.</p>
	</div>
</div>

Answer 3

如果我没有弄错的话，纯粹的css解决方案是不可能的，虽然可以考虑css网格布局，这也有一些兼容性问题。我不明白为什么你说js是滞后的。所有现代浏览器都非常有效地解释和处理语言，大多数网站和网络应用程序都使用javascript。所以这是一个使用js计算的解决方案。

＆＃13;

var img = document.getElementById("myImage");
var bottom = document.getElementById("bottom");
var myTop = document.getElementById("myTop");

var outerHeight = 200;
var remainingHeight = 200 - bottom.offsetHeight;

myTop.style.height = remainingHeight + "px";

if (img.offsetHeight >= remainingHeight) 
  img.style.height = remainingHeight + "px";

＆＃13;

.outer{
  width: 100%; 
  height: 200px; 
  background-color: lightgray;
  padding: 20px;
}

.top {
  position:relative;
}

.top img {
  position:absolute;
  display:block;
  bottom:0px;
}

＆＃13;

<div class="outer">
	<div id="myTop" class="top">
		<img id="myImage" src="http://themeflush.com/minimalix/demo4/wp-content/uploads/2014/08/wallpapers-for-christian-background-tumblr-photography-vintage-images-tumblr-wallpapers.jpg"/>
	</div>
	<div id="bottom" class="bottom">
		<span>Title of the description<span>
		<p>This is a long description.</p>
	</div>
</div>

＆＃13;

父div固定高度，第二个子可变高度，第一个孩子填充其余

3 个答案:

jsFiddle demo