Html Question posted in
Some basic documentation can be found here.

Fixed border outside main content html css (newbie)

newbie to html css.
I want to make a fixed border outside the main content of the webpage.If i scroll… the border shouldnt move.

Tried to give padding to the body,outside a wrapper but it doesnt stick to the content when i scroll kinda confuse what to try

Tags:

2

Answers


  1. 0

    I believe this is the CSS you looking for to style a border for the webpage, which sticks when scrolling. You can experiment with different values of top/right/bottom/left to match your preference.

        .sticky-border {
        position: fixed;
        top: 1%;
        right: 1%;
        bottom: 1%;
        left: 1%;
        border: 5px solid #000;
    }
    <div class="sticky-border"></div>
    Login or Signup to reply.
  2. 0

    It depends on exactly what you want to happen inside the frame – especially where do you want scroll bars to be?

    This snippet does the following:

    Removes the default margin that browsers tend to put on the body element.

    Puts the frame on through a pseudo before element (i.e. not in the DOM, as it’s only for visual effect) which sits above the body (z-index) but doesn’t itself respond to pointer events.

    This pseudo element is positioned fixed – which means it is positioned in relation to the viewport – and sized according to the viewport.

    Puts all remaining content inside a unique element #content

    <html>
<style>
  body {
    margin: 0;
  }
  
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    border: solid 10px red;
    z-index: 1;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
  }
  
  #content {
    height: calc(100vh - 20px);
    width: calc(100vw - 30px);
    padding: 10px 10px;
    position: relative;
    overflow-y: auto;
  }
</style>

<body>
  <div id="content">
    first line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a
    line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br>    a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br> a line<br>    a line<br> last line
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search