一页网站，可滚动 div

Question

我需要建立一个单页网站，有 3 个像这样的 div：

.container{
  display: table;
  width: 100%;
  height: 100%;
 }
.container > div {
  vertical-align:top;
 }
 .left, .center, .right {
   display: table-cell;
   height:auto;
 }
 .left, .right{
   width:200px;
 }

   <div class="container">
      <div class="left">
      <div class="middle">
      <div class="right">
   </div>

3个div有自动高度，左右一个有固定宽度。中间的是动态数据，我希望它在需要的时候有一个滚动条。

问题是因为我在 3 个 div 上设置了自动高度，所以当我将数据添加到中间一个时，其他 div 会改变大小。我试图在不使用 Javascript.

的情况下找到解决方案

Answer 1

Flexbox 可以做到这一点

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  height: 100vh;
}

.left,
.right {
  flex: 0 0 200px;
  background: pink;
  padding: 1em;
  max-height: 100vh;
  overflow: auto;
}

.container {
  display: flex;
  height: 100vh;
  background: red;
  align-items: flex-start;
}

.middle {
  flex: 1;
  max-height: 100vh;
  background: lightblue;
  overflow: auto;
}

<div class="container">
  <div class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="middle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt exercitationem totam, odit modi dolorem quis dicta molestias alias praesentium harum consequuntur sint animi consequatur, sunt fuga id illum deleniti fugiat? Nesciunt quis fuga recusandae,
    eveniet libero dicta aliquid explicabo qui molestiae, quae architecto at excepturi accusantium earum neque assumenda distinctio commodi possimus harum voluptatum sint natus minima numquam! Dolorem voluptas amet, fuga omnis nobis sint numquam harum,
    nam unde optio velit eligendi iste veniam voluptatibus suscipit dignissimos voluptatem adipisci sequi ullam voluptates? Earum, alias inventore. A, ratione itaque reiciendis possimus tenetur libero assumenda? Commodi optio quas adipisci tempora modi
    sequi voluptatem provident quos laudantium accusamus! Cupiditate incidunt soluta est, repellendus eius quo, earum quia tenetur ipsa minus aspernatur, ex ad! Eius repellendus itaque nostrum minus perferendis exercitationem non doloremque necessitatibus
    sequi autem omnis consequuntur quo, laborum ratione, repudiandae aliquid nisi amet harum culpa vel magni cumque voluptates deserunt fugit. Quo, iste veritatis. Dolore placeat fuga alias obcaecati. Totam quidem itaque ipsa culpa sint aperiam praesentium
    dignissimos fuga earum doloribus autem eveniet, impedit molestiae illum neque rerum non suscipit eligendi doloremque, nam veniam! Sequi dolorum officia esse, temporibus itaque fugit eius voluptate consequatur laboriosam dolores qui ducimus ipsam accusantium
    laudantium laborum.</div>
  <div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum, deserunt magnam ipsum porro dicta accusantium</div>
</div>

Answer 2

看看这是不是你想要的？

.container{
  display: table;
  width: 100%;
  height: 100%;
 }
 body{
 margin: 0;
 }
.container > div {
  vertical-align:top;
 }
 .left, .middle, .right {
   display: table-cell;
   height: 100vh;
   box-sizing: border-box;
   
 }
 .left, .right{
   width:20%;
   background: gray;
 }
 
 .middle{
   overflow: auto;
   position: relative;
 }
 
 .in-middle{
   background: tomato;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
 }
 .in-in-middle{
   height: 1000px;
   background: tomato;
 }

<div class="container">
  <div class="left"></div>
  <div class="middle">
    <div class="in-middle">
      <div class="in-in-middle"></div>
    </div>
  </div>
  <div class="right"></div>
</div>

一页网站，可滚动 div

One page website, with a scrollable div

html

css

onepage-scroll