gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:05:57 25 4
gpt4 key购买 nike

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

最佳答案

虽然您的问题很晦涩,但我认为您是在询问在移动浏览器宽度时保留 div 的宽度。如果是这种情况,我建议您在 CSS 中使用 width: 100%;

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

看来你已经明白了?


如果您正在寻找响应式网页设计,则必须使用 @media CSS3 特性:

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

关于javascript - 在调整窗口大小时移动 div 时需要帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19606371/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com