Question

我需要建立一个单页网站，其中包含3个div：

＆＃13;

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

＆＃13;

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

＆＃13;

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

看看这是不是你想要的？

＆＃13;

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

＆＃13;

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

＆＃13;

一页网站，带有可滚动的div

2 个答案: