包含固定修复的居中 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;
}

编辑：您可以点击整页以查看展开高度的结果。

centering fixed html