居中滾動內容框

我想構建一個佈局，如下所示。主要目標是讓一箇中心區域的內容與全身滾動條一起滾動。居中滾動內容框

我想出由兩層具有不同的z索引中的溶液（JsFiddle）。上面的那個包含邊界（白色），下面的包含內容（灰色）。

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

我面臨兩個主要問題：連接到下層（內容）不火（例如，在內容的標題）

活動。
這很複雜。內容將包含許多邏輯，這些邏輯也必須與前一部分交互（例如導航）。一旦整個應用程序變得更復雜，我也擔心很多佈局問題。

我很確定必須有一種更簡單的方法來實現這種佈局。有沒有人有建議？

來源

2016-10-25 tschuege

您可以使用.bordercontainer { pointer-events: none; }解決此問題。
看起來像一個非平凡的任務典型的CSS複雜性：D

來源

2016-10-26 22:33:15 elektronik

非常感謝！在正確的地方設置指針事件就是一件好事。關於CSS的複雜性，仍然不相信這是解決這個問題的理想方案。出於這個原因，我將這個問題留待一段時間，看看是否有其他人對如何解決問題有一個想法。 – tschuege

@tschuege，它有一段時間了嗎？ :) – elektronik

居中滾動內容框

回答

相關問題