页面布局-左侧菜单右侧内容

左侧200px，右侧根据窗口自适应，右侧宽度小于800px的时候会出现滚动条

要实现的效果

html

<div class="container">
  <div class="inner left">
    <div class="menu-item">
      <div style="width: 300px;background: blue;">item</div>
    </div>
    <div class="menu-item">item1</div>
    <div class="menu-item">item1</div>
  </div>
  <div class="inner right">
    <div class="content">
      这里是项目内容展示区域
    </div>
  </div>
</div>

基本的css

*{
  box-sizing: border-box;
}
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  word-break: break-all;
}
.inner{
  border: 1px solid lightpink;
  background-color: lightskyblue;
}
.content{
  width: 100%;
  height: 100%;
  min-width: 800px;
}

flex实现

.container{
  width: 100%;
  height: 100%;
  display: flex;
}
.container .left {
  width: 200px;
}
.container .right {
  width: calc(100% - 200px);
  overflow: auto;
}

float实现

.container{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container .left {
  float: left;
  width: 200px;
  height: 100%;
}
.container .right {
  float: left;
  width: calc(100% - 200px);
  height: 100%;
  overflow: auto;
}

左侧菜单定位-absolute和fixed都可以实现

.container{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container .left {
  width: 200px;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.container .right {
  height: 100%;
  overflow: auto;
  margin-left: 200px;
}