調整大小容器，最大寬度

我試圖建立一個網頁，一個包裝，這將是最大寬度窗口高度：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

調整大小容器，最大寬度

回答

相關問題