包含固定修复的居中 div

Question

居中的 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>

Answer 1

首先，您需要创建一个包含#nav 和#main div 的包装器（在我的回答中为#content-wrapper）。然后为该包装添加display: flex 以水平设置子div。要将包装器对齐到中心，请定义一个固定的width（在我的答案中为1100px）并将左、右margin 设置为auto。

然后将position: relative 添加到包装器中。这允许您在包装器内的子 div 中使用 css position 属性。

最后，为#nav div 添加position: fixed 以设置固定位置，并为#main div 添加position: absolute 和left: 300px（在我的答案中）以在包装器中滚动。

见下文。

<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>

Answer 2

你的意思是这样的？

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.8);
  padding: 10px;
  display: flex;
}

#nav {
  margin-right: 10px;
  width:20%;
  background: rgb(240,240,240);
}

#main {
  width: 80%;
  background: rgb(240,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;
}

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