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的宽度。如果是这种情况，我建议您在CSS中使用width: 100%;

这将确保您能够使容器的宽度与容器的大小（在本例中为窗口）保持相同的大小;而不是

看来你已经有了吗？

如果您正在寻找响应式网页设计，则必须使用@media CSS3功能：

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

Answer 2

如果您想要始终将其居中，则必须指定小于100％的宽度（以px或％为单位），否则容器将始终使用视口的整个宽度，因此没有理由'移动'。

在窗口调整大小时移动div需要帮助

2 个答案: