调整大小容器，最大宽度

我试图建立一个网页，一个包装，这将是最大宽度窗口高度：700像素调整大小容器，最大宽度

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

<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>

来源

2013-12-12 Pdnell

我结束了加入一些造型的包装：

#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看到最后的结果

来源

2014-01-13 15:18:10 Pdnell

使用溢出：隐藏到包装类给包装类的溢出：隐藏您的滚动隐藏

来源

2013-12-12 04:38:50

的关键是，在为了使#wrapper从浏览器'继承'100％的高度，它的所有父元素（包括HTML标签）需要位于：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

来源

2013-12-12 20:11:36 Mechame

虽然，目标是让容器垂直调整大小。因此，如果要调整视口的高度，则内容将根据视口的大小进行调整，并占用视口高度的100％，同时遵守包装器的宽度。您的示例在Chrome中看起来并不适合我。 – Pdnell

啊，很对。我没有完全让你的代码工作。如果你看看上面的第二个链接，它现在就可以工作。更具体地说，容器#wrapper水平缩放，但它的内容溢出页面底部。如果要垂直缩放内容以使图像的中心位于浏览器的中心，我可以向您展示如何执行此操作。 – Mechame

是的，我们的目标是纵向扩展......它应该完全响应窗口大小。 – Pdnell

调整大小容器，最大宽度

回答

相关问题