Question

我想构建如下所示的布局。主要目标是让一个中心区域的内容随着整个身体的滚动条滚动。

我找到了一个解决方案（JsFiddle），它由两个具有不同z-index的层组成。上面一个包含边框（白色），下面一个包含内容（灰色）。

HTML
<body>
  <div class="contentcontainer">
    <div class="middlecontainer">
      <div class="center content" onclick="alert('click on content')">
        <h1 onclick="alert('click on content header');"> content</h1>
        <div onclick="alert('click on content body');">Lorem ipsum    dolor sit amet,...
        </div> 
      </div>
    </div>
 </div>
 <div class="bordercontainer">
   <div class="header" onclick="alert('click on header');"></div>
     <div class="middlecontainer">
       <div class="left">
         <ul>
           <li>navigation 1</li>
           <li>navigation 2</li>
           <li>navigation 3</li>
         </ul>
       </div>
       <div class="center"></div>
       <div class="right"></div>
     </div>
    <div class="footer"></div>
  </div>
</body>


CSS
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: MuseoSans-300;
    font-size: 24px;
}

ul {
    padding: 20px;
}

li {
   list-style-type: none;
}

.contentcontainer {
    position: relative;
    display:flex;
    top:100px;
    z-index: 0;
    width: 100%;
}

.bordercontainer {
    position: fixed;
    left:0;
    top:0;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1;
}

.header {
    background-color: white;
    height: 100px;
}

.left {
   background-color: white;
   flex: 1 0 100px;
}

.middlecontainer {
    display: flex;
    flex-grow: 1;
}

.center {
    opacity: 1;
    flex: 0 0 300px; 
}

.content {
    margin: auto;
    background-color:rgb(71, 89, 98);
    color: white;
    padding-bottom: 100px;
}

.right {   
    background-color: white;
    flex: 1 0 100px;
}

.footer {
    background-color: white;
    height: 100px;
}

我面临两个主要问题：

附加到较低层（内容）的事件不会触发（例如，在内容的标题上）。
这很复杂。内容将包含许多逻辑，这些逻辑也必须与外部部分（例如导航）交互。一旦整个应用程序变得更复杂，我也会担心很多布局问题。

我非常确定必须有一种更简单的方法来实现这种布局。有没有人有建议？

Answer 1

您可以使用.bordercontainer { pointer-events: none; }。
对于一项非常重要的任务，我看起来像典型的CSS复杂性：D

中心内容框滚动整个身体

1 个答案: