I'm trying to implement something similar to the website d-esk.net, where there is a viewport window that is kept in place while you scroll, allowing the scrolled content to go below said window. The contents of the site are kept within the borders of this window. What would be the best way to go about this?

I tried messing around with [grid-col] { border: 1px solid black; } and [grid-row] { border: 1px solid black; } but I haven't had any luck. I'm a beginner to html and CSS so any help is appreciated, resources for research would be welcome.

Thanks so much!

CodePudding user response：

The frame has a position fixed:

html, body {
    width: 100%;    
}
body {
    text-align: center; 
}
.frame {
    height: 80%;
    width: 70%;
    border: 1px solid black;
    position: fixed;
    top: 10%;
    left: 15%;
}
.container {
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    text-align: justify;
    box-sizing: border-box;
}

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>