1

这就是我的基本 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;
}
4

2 回答 2

1

尽管您的问题很模糊，但我认为您是在询问在移动浏览器宽度时是否保留 div 的宽度。如果是这种情况，我建议width: 100%;在您的 CSS中使用

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

看来你已经有了？

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

@media (max-width: 480px) {
   .footer {
       background-color: #fff;
   }
}
于 2013-10-26T12:01:35.047 回答
0

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

于 2013-10-26T11:59:01.347 回答