Question

我想创建一个盒装布局，其中盒装/框架保持原位并且内容在其中滚动。但是，我不想使用旧式滚动框架方法，在该面板上有一个面板滚动条。

我希望实现类似于此的＆gt; https://pixelgrade.com/demos/themes/?product=border - 为此目的，忽略内容，但是你可以看到留在原位的白框/边框 - 这就是我想要的。窗口有标准滚动条，而不是框架本身。

我想我可能需要使用链接sticky-kit.js，但是如果这是一个红鲱鱼，请道歉。

任何人都可以指出我的搜索应该开始的正确方向。在你问之前，我试图自己调查一下：）

Answer 1

我能想到的最简单的事情是沿着边缘使用一些固定的div来为你的盒子创建一个边框。

＆＃13;

.container {
  border: 1px solid red;
  width: 100%;
}
.content {
  height: 1000px;
  background-color: lightblue;
  padding: 50px;
}
.top {
  background-color: white;
  height: 40px;
  position: fixed;
  width: 100%;
  top: 0;
}
.left {
  background-color: white;
  width: 40px;
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
}
.right {
  background-color: white;
  width: 40px;
  position: fixed;
  height: 100%;
  right: 0;
  top: 0;
  bottom: 0;
}
.bottom {
  background-color: white;
  height: 40px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

＆＃13;

<section class="container">
  <section class="content">
    this is my content...
  </section>
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</section>

＆＃13;

这里是允许边框透明的替代解决方案（为了显示背景图像）。这是一个简单的隐藏内部div的滚动条的小黑客。我强烈建议您选择使用此备选方案，以确保页面上有更多内容，因为没有可见的滚动条。

＆＃13;

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.wrapper {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 40px;
  right: 40px;
  background-color: lightblue;
  overflow: hidden;
}

.wrapper2 {
  overflow-y: scroll;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-right: -20px;
  padding: 20px;
}

.content {
  height: 1000px;
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <div class="wrapper2">
      <div class="content">
        This is my content...
      </div>
    </div>
  </div>
</div>

＆＃13;

创建盒装/框架布局

1 个答案: