Question

我正在尝试使用最大宽度为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>

Answer 1

使用Overflow：hidden到包装器类将Wrapper类赋予溢出：隐藏滚动隐藏

Answer 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

Answer 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看到决赛

使用max-width将容器调整为窗口高度

3 个答案: