使用 max-width 将容器大小调整为窗口高度答案

【问题标题】：Resize container to window height with max-width使用 max-width 将容器大小调整为窗口高度
【发布时间】：2014-01-13 23:18:10
【问题描述】：

我正在尝试使用最大宽度为 700px 的包装器构建一个页面

理想情况下，页面会响应并调整图像大小以适应窗口。我真的很难让浏览器调整图像和容器的大小以适应窗口高度。宽度似乎缩放得很好。最终，用户不必向下滚动即可查看该页面。如果没有 JavaScript，这可能吗？如果没有，有人可以指出我正确的方向吗？谢谢！代码如下：

jsfiddle：http://jsfiddle.net/LTchE/

<style type="text/css">
body, html {
    height: 100%;
    margin: 0px auto;
    padding: 0px auto;
}
#wrapper {
    height: auto;
    min-height: 100%;
    margin: 0px auto;
    padding: 0px auto;
    max-width: 600px;
    background: #de291e;
}
.happyHolidays {
    background: url('http://placehold.it/600x80') no-repeat center;
    background-size: contain;
    width: 90%;
    height: 80px;
    margin: 0 auto;
    display: block;
}
.fromMe {
    background: url('http://placehold.it/600x80') no-repeat center;
    background-size: contain;
    width: 90%;
    height: 80px;
    margin: 0 auto;
    display: block;
}
.buttons {
    text-align: center;
}
.snowperson {
    text-align: center;
}
.snowperson img {
    width: 100%;
}
</style>
</head>

<body>
<div id="wrapper">
    <div class="happyHolidays"></div>
    <div class="fromMe"></div>
    <div class="snowperson">
        <img src="http://placehold.it/650x750" name="snowperson" border=0>
    </div>
    <div class="buttons">
        <a href="javascript:NextImage()">
            <img src="http://placehold.it/150x50" alt="Next snowperson">
        </a>
    </div>
</div>

</body>

【问题讨论】：

标签： html css

【解决方案1】：

使用溢出：隐藏到包装类将 Wrapper 类赋予溢出：hidden 你的滚动是隐藏的

【讨论】：

【解决方案2】：

关键是，为了让#wrapper '继承'浏览器的 100% 高度，它的所有父元素（包括 HTML 标签）都需要是 position:relative;和高度 100%;

<html>
  <head>
    <style>
      html, body, .wrap {
        position:relative;
        height:100%;
        margin:0;
      }
      .wrap {
        max-width:700px;
        margin:0 auto;
        background:#aaa;
      }
    </style>
  </head>
  <body>
    <div class="wrap">Test Text</div>
  </body>
</html>

我把它暂时扔到了我的服务器上：http://mechapps.co/fullheight/

还有，这是您的代码：http://mechapps.co/fullheight/overflown.html

【讨论】：

目标是让容器垂直调整大小。因此，如果您要调整视口的高度，内容将调整为视口的大小并占据视口高度的 100%，同时服从包装器的宽度。您的示例在 Chrome 中似乎没有为我这样做。
啊，完全正确。我没有完全让你的代码工作。如果您查看上面的第二个链接，它现在可以工作了。更具体地说，容器#wrapper 水平缩放，但它的内容从页面底部溢出。如果您想垂直缩放内容以使图像的中心位于浏览器的中心，我也可以向您展示如何做到这一点。
是的，目标也是垂直缩放...它应该完全响应窗口大小。
垂直响应的网站很棘手。几个问题： 1. 您是否希望标题（前两个图像）始终为 160 像素？ 2.你想让雪人图片在浏览器中垂直居中，还是在页眉下方空间垂直居中？

【解决方案3】：

我最终为包装器添加了一些样式：

#wrapper {
    margin: 0 auto;
    background: #de291e;
    background-image: url('../images/snowbg.png');
    background-repeat: repeat;
    min-width: 600px;
    max-width: 700px;
    min-height: calc(690px * (90/150));
    height: 90vh;
    width: 150vh;
    max-height: 890px;
    position: relative;

}

这对我的情况比较有效......认为它仍然不完美。

您可以在 www.ogilvypr.com/happyholidays 查看决赛

【讨论】：