如何在不覆盖其他div的情况下将div位置固定在底部
如何在不覆盖其他div的情况下将div位置固定在底部
提问于 2022-06-24 10:41:20
我有两个div，一个是手风琴，另一个是蓝盒子。
我需要把蓝色的盒子放在页面的底部，所以位置:固定+底部: 0；工作良好，直到手风琴变大。当手风琴的数量越来越多的时候，蓝色的盒子就会覆盖手风琴，所以不可能使用它。
怎样才能把蓝色的盒子放在书页的底部而不覆盖手风琴。
<!DOCTYPE html>
<html lang="en">
<body>
<div>First div - accordion</div>
<div style="position: fixed; bottom: 0">Second div - blue box</div>
</body>
</html>
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-06-24 13:11:48
柔性箱是一种解决方案。
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1
}
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1
}
header {
background-color: silver;
}
main {
background-color: deepskyblue;
}
footer {
background-color: tomato;
}<body>
<header>HEADING....</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aut veritatis sint similique saepe, molestiae doloremque assumenda nobis deleniti praesentium explicabo, quae iste tempora! Fuga facere autem dolorem cum?</p>
</main>
<footer>
<p>Footer area</p>
</footer>
</body>
Stack Overflow用户
发布于 2022-06-24 11:29:18
您可以使用viewport来解决这个问题，请尝试使用以下代码：
<!DOCTYPE html>
<html lang="en">
<body>
<div class="accordion-div">First div - accordion</div>
<div class="second-div">Second div - blue box</div>
</body>
<style>
.accordion-div {
width: 100%;
height: 90vh;
overflow: hidden;
overflow-y: auto;
}
.second-div {
position: fixed;
bottom: 0;
}
</style>
</html>这里，我已经将第一个div的viewport设置为90vh，但是您可能需要使用一个稍微不同的值来适应您的应用程序。希望这能有所帮助！
Stack Overflow用户
发布于 2022-06-24 12:53:32
当页面较短且屏幕未被填充时，将div放置在页面底部，并保持在底部而不重叠内容，当内容超过屏幕时，我添加了页脚，将div放在里面。此外，我还将css添加到body和脚注中，如下所示：
body {
display: flex;
height: 100vh;
flex-direction: column;
}
footer {
marging-top: auto;
}在这两种情况下，“蓝色盒子”总是位于底部。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72742826
复制相关文章
相似问题
腾讯云开发者
