需要協助調整div調整窗口大小

Question

因此，這就是我基本html頁面的布局，並且我希望內容div在調整大小時相對於瀏覽器窗口大小移動，我在該站點上查找了很多答案，但似乎都沒有用。 任何幫助深表感謝。

<body>
    <header>
    </header>
        <div id="container">
            <div class="content">
                  xyz
            </div>
        </div>
    <footer>            
    </footer>
</body>

CSS看起來像這樣

#container {
position:relative;
height: 100%;
width:100%; /* Sizing - any length */
margin:0 auto 0 auto; /* Center content */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

footer {
width: 100%;
background: black;
position: fixed; 
bottom: 0;
height: 60px;
}
header {
width: 100%;
background: black;
position: fixed; 
bottom: 0;
height: 60px;
}

Answer 1

盡管您的問題很模糊，但我認為您是在詢問如何在移動瀏覽器寬度時保留div的寬度。 如果是這種情況，我建議您使用width: 100%; 在您的CSS中

這將確保您能夠使容器的寬度相對於容器的大小（在這種情況下為窗口）保持相同。 而不是無法

看來您已經知道了嗎？

如果您正在尋找響應式網頁設計，則必須使用@media CSS3功能：

@media (max-width: 480px) {
   .footer {
       background-color: #fff;
   }
}

Answer 2

如果您要始終保持居中，則必須指定小於100％的寬度（以px或％為單位），否則容器將始終使用視口的整個寬度，因此沒有理由“移動” ”。

需要協助調整div調整窗口大小

問題描述

2 個解決方案

解決方案1
1 已采納 2013-10-26 12:01:35

解決方案2
0 2013-10-26 11:59:01

需要協助調整div調整窗口大小

問題描述

2 個解決方案

解決方案1 1 已采納 2013-10-26 12:01:35

解決方案2 0 2013-10-26 11:59:01

解決方案1
1 已采納 2013-10-26 12:01:35

解決方案2
0 2013-10-26 11:59:01