Mike Mike - 3 months ago 11
CSS Question

Creating a boxed/ framed layout

I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.

I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.

I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.

Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)

Answer

The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.

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

Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.

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;
}
<div class="container">
  <div class="wrapper">
    <div class="wrapper2">
      <div class="content">
        This is my content...
      </div>
    </div>
  </div>
</div>

Comments