Question

我该如何创建这个css设计？试图在可滚动的图片上没有带有白色div的滚动页面

当我使用高度100％然后侧边栏将显示OK，但可滚动区域将显示在屏幕下方，因此浅灰色区域是某种背景，白色区域是内容，我想在其上添加带有css的边距以及

注意：希望避免媒体查询

Answer 1

您可以执行以下操作，Flexbox示例：

＆＃13;

/* reset browser defaults */
* {margin:0;padding:0;box-sizing:border-box;overflow:auto}
html, body {width:100%;height:100%}

#container {
  width: 100%;
  height: 100%;
  display: flex; /* displays children inline */
  flex-wrap: wrap; /* enables wrapping */
}

#container > * {
  border: 1px solid;
}

nav {
  flex: 0 1 100%;
  background: #777;
}

aside {
  flex: 0 1 200px;
  background: #777;
}

.scroll {
  flex: 0 1 calc(100% - 250px); /* - 200px of the aside's width - 2 x 25px left & right margin */
  margin: 25px;
  overflow: auto; /* mandatory */
  position: relative; /* mandatory */
}

.content {
  width: 2000px;
  height: 2000px;
  background: #eee;
  position: absolute; /* mandatory */
}

＆＃13;

<div id="container">
  <nav>NAVBAR</nav>
  <aside>SIDEBAR</aside>
  <div class="scroll">
    SCROLLABLE AREA
    <p class="content">some pretty big content for testing...</p>
  </div>
</div>

＆＃13;

诀窍在于内容及其父的定位，没有定位，overflow-y: scroll或overflow-y: auto在父上不适用。

Answer 2

我不知道它是否看起来像你想要实现的目标，但这是一个快速的片段。

我已将可滚动区域放在容器中，并将最大高度放在该容器中。然后你只需要添加overflow-y: scroll以使其滚动

body {
  max-height: 100vh;
  display: flex;
  flex-flow: row nowrap;
}

.sidebar {
  width: 20%;
  background-color: #333;
}

.container {
  width: 80%;
  
  max-height: 100%;
  overflow-y: scroll;
  background-color: #eee;
}

.area{
  margin: 20px;
  background:#fff;
  overflow: hidden;
  padding: 10px;
}

<body>
  <div class="sidebar"></div>
  <div class="container">
    <div class="area">

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sagittis lectus, sit amet placerat nisl. Pellentesque blandit porttitor massa vel dignissim. Fusce id velit id libero lacinia tristique. Morbi pretium tempor sapien, id blandit arcu
        congue sed. Mauris ultrices tincidunt ipsum, non rhoncus eros consequat vel. Etiam consequat efficitur nibh sed semper. Donec sit amet lobortis diam, et malesuada ligula. Ut a pretium velit, vel porta metus. Proin placerat sollicitudin imperdiet.
        Pellentesque dolor nisi, sagittis a diam ut, varius aliquet turpis. Vestibulum pharetra elementum velit, id accumsan felis dignissim sed. Integer tristique faucibus tempor. Aenean varius est eu nisi suscipit interdum. Nam blandit ut nunc ac venenatis.
        Donec diam justo, rhoncus in libero ac, tincidunt auctor dolor.
      </p>
      <p>
        Aliquam id orci pharetra, aliquam diam quis, mattis nisi. Maecenas hendrerit eget ex sed consectetur. Praesent at dolor sit amet nisl gravida aliquam. Phasellus maximus fermentum est. Integer sodales tincidunt volutpat. Mauris sit amet lectus non ipsum
        tincidunt posuere ut at diam. Nunc in ipsum tincidunt, tempus eros in, viverra diam. Vestibulum convallis odio in arcu consequat congue. Duis egestas ante a orci volutpat, ac commodo est molestie. Aliquam nisl ex, tincidunt in posuere vitae, pretium
        rhoncus ligula. Aliquam vehicula turpis sed auctor hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec metus tellus, faucibus et libero in, luctus cursus tortor. Fusce vel magna lorem.
        Aenean sodales sollicitudin eros, quis aliquet mi finibus sit amet.
      </p>
      <p>
        Maecenas ut convallis arcu. Morbi sed fringilla libero. Fusce id posuere tellus. Sed imperdiet, justo vel sollicitudin fermentum, mauris ante lacinia ex, vel mollis nisi metus rhoncus ex. Nam et mauris euismod, vehicula tellus vel, aliquet mauris. Aliquam
        finibus enim at maximus imperdiet. Suspendisse porta ipsum ac urna fermentum, at pharetra nisl vestibulum. Praesent sollicitudin tristique nibh id eleifend. Proin ut orci sit amet sapien fringilla consectetur sed id sem. Vestibulum et sollicitudin
        libero. Curabitur enim neque, euismod vitae felis nec, sagittis cursus sem. Mauris id ornare felis.
      </p>
      <p>
        Aliquam at accumsan magna. Cras eleifend purus quis consectetur posuere. Aliquam nec nunc at tortor sollicitudin interdum. Donec metus tellus, pretium nec ipsum id, sollicitudin pulvinar nisi. Etiam finibus, velit id rhoncus posuere, risus ex auctor nulla,
        et placerat orci tellus non dolor. Fusce id sodales est. Aliquam fringilla nibh ut mi auctor eleifend. Phasellus placerat rhoncus ligula ut mollis. Sed a elementum eros, sodales suscipit ante. Sed vitae neque turpis.
      </p>
      <p>
        Etiam sed pulvinar magna, non laoreet magna. Fusce ullamcorper mauris sit amet ligula ullamcorper tempor. Etiam convallis ante sed odio ultrices, id sagittis lorem pretium. Sed ligula odio, volutpat nec vestibulum a, dignissim a leo. Ut ultrices ligula
        erat, sit amet cursus odio ornare ac. Etiam molestie ex nisi, et luctus ligula mollis sed. Nullam ac tempus sapien. Aenean varius lacus ac lacinia imperdiet. Sed arcu lorem, facilisis ut ipsum vel, tempor fermentum ex. In scelerisque laoreet arcu,
        nec vestibulum turpis. Praesent dolor massa, imperdiet vitae efficitur in, laoreet quis urna. Morbi malesuada orci id ipsum aliquet bibendum. Maecenas commodo ultricies arcu quis venenatis. Nunc tellus quam, feugiat non urna posuere, ornare sollicitudin
        nunc. In condimentum, tortor eget ultricies faucibus, ligula urna molestie sem, et suscipit arcu augue vitae magna. Ut pulvinar ipsum eu porttitor elementum.
      </p>
      <p>
        Vivamus laoreet eros sed mollis tempor. Cras rhoncus placerat erat. Morbi vel est sed erat hendrerit hendrerit et ac odio. Aliquam tincidunt lacinia dui sollicitudin gravida. Pellentesque eget consequat mauris. Maecenas at erat nec mauris mollis faucibus.
        Sed eget semper eros, vitae iaculis elit. Fusce et interdum elit. Morbi tincidunt felis sed enim congue porta. Proin eget feugiat purus. Praesent placerat convallis nulla, eu convallis risus faucibus molestie. Maecenas non interdum erat. Interdum
        et malesuada fames ac ante ipsum primis in faucibus.
      </p>
    </div>
  </div>
</body>

如何使用可滚动的div

2 个答案: