HTML/CSS包裝問題

Question

你能幫我解決這個包裝問題嗎？當我調整瀏覽器窗口大小時，一切都開始移動。我設法解決這個問題：

#wrapper { 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
} 

但現在網站太小了。我希望它是全屏，而不是960像素寬度。當我使寬度和高度自動，然後一切都開始移動了。該怎麼辦？

Answer 1

有一個關於你的造型問題，你用百分比每一項措施，這意味着適應基於父方你的立場，父母是這裏的窗口大小。

因此，如果不限制包裝寬度，正常移動就會移動。

您可以使用最小寬度來處理這個問題。

#wrapper { 
     margin: 0 auto; 
     min-width:960px; 
    } 

Answer 2

通常這個CSS應該工作：

#wrapper { 
    margin: 0 auto; /*center div => only alternative of your version*/ 
    min-width:960px; 
    width: auto; 
} 

Answer 3

我懷疑你想是這樣的：
http://codepen.io/simply-simpy/pen/aOyoZM

* { 
    margin: 0 
} 
html,body,wrap { 
    height: 100%; 
} 
.content { 
    width: 960px; 
    margin: 0 auto; 
    background: #eee; 
    height: 100%; 
    font-size: 36px; 
} 
.wrap { 
    background-image: url('https://placeimg.com/640/480/arch'); 
    height: 100%; 
    background-size: cover; 
} 

<div class="wrap"> 
    <div class="content"> 
    <p>Content goes here</p> 
    </div> 
</div>