css - 100% 高度，像素最小高度答案

【问题标题】：css - 100% height with pixel min-heightcss - 100% 高度，像素最小高度
【发布时间】：2013-05-28 01:20:05
【问题描述】：

我的目标是创建一个占据 100% 窗口高度的容器，并且在其中有一个也是 100% 窗口高度的图像。不过，我还想在容器上设置一个最小高度，这样就不会太太小了。
例如：

<html>
    <body style="height: 100%;">
        <div style="height: 100%; min-height: 500px;">
            <img src="cool.jpg" style="height: 100%"/>
        </div>
    </body>
</body>

（我发誓我的网页比这更酷）

好的，一切正常。直到我们缩小窗口以使min-height 启动。此时div 停止缩小，正如预期的那样，但img 继续随着窗口缩小。

有什么想法吗？
一个纯 CSS 实现会是理想的，但如果需要，我对 JS 持开放态度。

【问题讨论】：

把min-height也给img。或者只是body标签。
你能添加一个小提琴来显示问题吗？
好主意：jsfiddle.net/xDczp
对我来说看起来不错。你在哪个浏览器上测试？

标签： javascript html height css

【解决方案1】：

给图片一个min-height而不是容器怎么样？

【讨论】：

【解决方案2】：

id只是将div背景设置为目标img，然后通过jquery限制resize时的高度。

<html>
<head>
<style>
div#cont {
background: url(path/to/cool.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-etc-vend-pref-background-size: cover;

}
</style>
</head>
<body style="height: 100%;">

  <div id="cont" style="height: 100%; min-height: 500px;">
    <img id="bg" src="cool.jpg" style="height: 100%"/>
  </div>


<script>
  $(window).load(function(){
  $(window).resize(function(){
   var  win = $(window),
       cont = $('div.cont'),
        min = 500;

    if (win.height() <= min){
      cont.height(min);
    } else {
      cont.height(win.height());
    }

 });

});
</script>
</body>

【讨论】：

虽然我最喜欢@linus 的回答，并且会亲自去，但这是一个替代解决方案。

【解决方案3】：

试试这个：http://jsfiddle.net/NpqCW/3/

如果您需要更多信息，请使用我对以下问题的回答作为参考细节和例子。 https://stackoverflow.com/a/10582476/339367

基本上，您缺少的是根标记上的 height:100%，即 <html>。所有父母都必须有这个设置才能工作，除了根元素<html>之外，你都在做这件事。

更新：

http://jsfiddle.net/jDk3s/

在图像上添加了 min-height:inherit 以使其在 chrome 上工作。它也可以通过删除 IMG 父 div 上的最小高度来修复（但不确定您是否真的需要它）.. 所以您可以选择一种或另一种方式。

【讨论】：

对我不起作用（无论如何在 Chrome 25 中）。带有min-width 的 div 仍然保持在 500 像素，但其他所有内容继续缩小到窗口高度的 100%。
@SeanConnolly 我明白了，我没有在 Chrome 上检查它。但它现在应该可以工作了。请再次检查。
添加了新小提琴的链接，忘记放早了。

【解决方案4】：

这就是你所追求的吗？

http://jsfiddle.net/xDczp/5/

.container {height:100%; width:100%;}
.content {height: 100%;}
.content img {height:100%; min-height: 500px; width:100%;}

图片高度不应低于 500 像素。

【讨论】：