如何解决包含固定修复的居中 div
居中的 div 可以包含固定的 div 吗?
我想在任何大窗口中并排居中放置一个固定导航框和一个滚动主框。我可以在非居中视图中修复导航框(下面的第一个代码),或者使用滚动导航框(第二个代码)将视图居中,但是在多次尝试包括多个嵌套包装器之后,一直无法结合这两个特征。也许固定和居中不兼容?如果这是可能的,我会很感激看到它是如何完成的。谢谢。
(1) 固定导航框,滚动主框,不居中:
<style>
#nav {position:fixed; top:50px; left:80px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:50px; left:380px; width:800px; height:1200px; background:#eee}
</style>
<div id="nav">
</div>
<div id="main">
</div>
</div>
(2) 居中,导航框滚动(#bigscreen 这里只是一个临时显示居中):
<style>
#bigscreen {width:2000px; height:1200px;}
#window {width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
#wrap {position:relative; width:1125px;height:800px; background:bisque}
#nav {position:absolute; top:54px; left:20px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:54px; left:300px; width:800px; height:640px; background:#eee}
</style>
<div id="bigscreen">
<div id="window">
<div id="wrap">
<div id="nav">
</div>
<div id="main">
</div>
</div>
</div>
</div>
解决方法
首先,您需要创建一个包含 #content-wrapper
和 #nav
div 的包装器(在我的答案中为#main
)。然后为该包装器添加 display: flex
以水平设置子 div。要将包装器与中心对齐,请定义一个固定的 width
(在我的答案中为 1100 像素)并将左、右 margin
设置为 auto
。
然后将 position: relative
添加到包装器中。这允许您在包装器内的子 div 中使用 css position
属性。
最后,为 position: fixed
div 添加 #nav
以设置固定位置,并为 position: absolute
div 添加 left: 300px
& #main
(在我的答案中)以滚动包装器。
见下文。
<style>
#content-wrapper {
position: relative;
width: 1100px;
margin: 50px auto;
display: flex;
}
#nav {
position: fixed;
width: 270px;
height: 400px;
background: #ddd
}
#main {
position: absolute;
left: 300px;
width: 800px;
height: 1200px;
background: #eee
}
</style>
<div id="content-wrapper">
<div id="nav"></div>
<div id="main"></div>
</div>
你的意思是这样?
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0,.8);
padding: 10px;
display: flex;
}
#nav {
margin-right: 10px;
width:20%;
background: rgb(240,240,240);
}
#main {
width: 80%;
background: rgb(240,240);
padding: 10px;
overflow: auto;
}
#content {
height: 2000px;
background-color: rgb(220,220,220);
font-family: arial;
text-align: center;
line-height: 2000px;
margin-bottom: 10px;
}
<div id="overlay">
<div id="nav">
</div>
<div id="main">
<div id="content">Overflow content</div>
</div>
</div>
如果这是您正在寻找的结果,您应该只关注以下几行,它们是实现这一目标的最重要的几行。
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
}
#nav {
width:20%;
}
#main {
width: 80%;
overflow: auto;
}
编辑:您可以点击整页以查看展开高度的结果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。