html - 将网站分为三个独立的元素

Question

我一直在尝试设计我的新想法，但在实际页面上定位内容时遇到问题。

我的想法是在最左边有一个菜单部分，中间有一个提要，左边有另一个菜单，但是，我似乎无法正确定位。

我希望这两个菜单共享相同的设置并且不可滚动，但中间的提要部分是可滚动的，因为它将通过数据库使用内容进行更新。

有任何想法吗？

state = "Minimized";

function controlCenter() {

  if (state == "Minimized") {
    document.getElementById("centerExpandable").style.display = "block";
    state = "Expanded";
    console.log("Expanded");

  } else if (state == "Expanded") {
    document.getElementById("centerExpandable").style.display = "none"
    state = "Minimized";
    console.log("Minimized")
  } else {
    console.log("Invalid Value " + state);
  }
}

.wrapper {
  display: flex;
  flex: 1;
}

.right {
  background-color: red;
  width: 20%;
  height: 80%;
}

.center {
  background-color: pink;
  width: 40%;
  margin: auto;
}

.centerExpandable {
  background-color: lightBlue;
  display: none;
}

.left {
  background-color: green;
  width: 20%;
  height: 80%;
}

<div class="wrapper">
<div class="right">
  <h1>Im The right panel</h1>
</div>
<div class="center" onClick="controlCenter()">
  <h1>Im The center panel</h1>
  <div id="centerExpandable" class="notes">
    <p>Im expandable content</p>
  </div>
</div>
<div class="left">
  <h1>Tasks Only</h1>
</div>
</div>

标签： htmlcss

Answer 1

你可以像这样使用 flexbox：

#container
{
  display:flex;
  width:500px;
  height:100px;
} 

#left, #right
{
  background-color:green;
  width:100px;

}


#center
{
  flex:1;
  background-color:blue;
  overflow-y: auto;
}

<div id="container">
  <div id="left">
  </div>
  <div id="center">
  </div>
  <div id="right">
  
  </div>
</div>