Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
    <html>
        <head>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
            <style>
                #layer{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    background-color: #ccc;
                    height: 100vh;
    
                    overflow: auto;
                    z-index: 1;
                    display: block;
                }
            </style>
        </head>
        <body>
            <div id="layer">&nbsp;</div>
    
            <div class="container-fluid">
                <div class="row">
                    <div class="fixed-top">
                        <div class="row">
                            <div class="col-3 d-none d-lg-block"></div>
                            <div class="col-6 flex-grow-1 d-flex justify-content-between">
                                header
                            </div>
                            <div class="col-3 d-none d-lg-block"></div>
                        </div>
                    </div>
                </div>
    
    
                <div class="row">
                    <div class="col-3 d-none d-lg-block">left</div>
                    <div class="col-6 flex-grow-1 d-flex justify-content-between">
                        <div>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci eros, sollicitudin mattis dolor id, accumsan porttitor augue. Sed quam velit, ultrices a elit condimentum, porttitor gravida magna. Fusce a leo massa. In vestibulum rutrum urna vel luctus. Praesent ornare mi elit, a mollis purus vestibulum eu. Vivamus suscipit justo consequat tortor luctus imperdiet. Sed tempus, lacus at rutrum ultrices, turpis dui laoreet velit, at sagittis purus turpis sed ligula. In semper consequat lectus vel sodales. Pellentesque viverra sapien nec dui fermentum sodales. Donec quis turpis varius, porta enim nec, rutrum lacus.
    
                            Nulla dui felis, efficitur a elit ut, scelerisque interdum sem. Mauris eros ligula, imperdiet in nisl porttitor, mattis suscipit nulla. Nullam posuere, risus eu semper pretium, justo felis mollis felis, ut pulvinar odio mi ac magna. Etiam et mauris elit. Duis pharetra ultricies felis eget pretium. Aenean cursus in elit nec congue. Nunc imperdiet magna non lorem malesuada, id condimentum dui lobortis. Mauris volutpat diam nibh, vitae finibus justo suscipit et. Aliquam erat volutpat. Fusce sit amet imperdiet urna. Aenean eleifend semper augue, at ultricies metus tempor in.
    
                            Fusce ultrices vehicula nunc a imperdiet. Maecenas condimentum mauris commodo metus vehicula laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce pharetra posuere erat, eget consectetur enim dignissim id. Nam vitae risus libero. Sed venenatis mauris sit amet efficitur venenatis. In ut tellus volutpat, hendrerit ligula ut, semper lectus. Sed lacinia dictum nibh feugiat mollis. Nam ut neque libero. Morbi quis lorem convallis mi aliquam fringilla at vitae massa. Mauris convallis velit lacus, quis gravida purus pharetra sed. Vestibulum hendrerit, urna vitae mollis efficitur, mi nisi pellentesque metus, sed suscipit ipsum ligula quis erat. Suspendisse lobortis nunc non dui feugiat vehicula. Quisque at mi vel enim ultricies rhoncus. Maecenas imperdiet quis sapien nec mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
​
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci eros, sollicitudin mattis dolor id, accumsan porttitor augue. Sed quam velit, ultrices a elit condimentum, porttitor gravida magna. Fusce a leo massa. In vestibulum rutrum urna vel luctus. Praesent ornare mi elit, a mollis purus vestibulum eu. Vivamus suscipit justo consequat tortor luctus imperdiet. Sed tempus, lacus at rutrum ultrices, turpis dui laoreet velit, at sagittis purus turpis sed ligula. In semper consequat lectus vel sodales. Pellentesque viverra sapien nec dui fermentum sodales. Donec quis turpis varius, porta enim nec, rutrum lacus.
    
                            Nulla dui felis, efficitur a elit ut, scelerisque interdum sem. Mauris eros ligula, imperdiet in nisl porttitor, mattis suscipit nulla. Nullam posuere, risus eu semper pretium, justo felis mollis felis, ut pulvinar odio mi ac magna. Etiam et mauris elit. Duis pharetra ultricies felis eget pretium. Aenean cursus in elit nec congue. Nunc imperdiet magna non lorem malesuada, id condimentum dui lobortis. Mauris volutpat diam nibh, vitae finibus justo suscipit et. Aliquam erat volutpat. Fusce sit amet imperdiet urna. Aenean eleifend semper augue, at ultricies metus tempor in.
    
                            Fusce ultrices vehicula nunc a imperdiet. Maecenas condimentum mauris commodo metus vehicula laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce pharetra posuere erat, eget consectetur enim dignissim id. Nam vitae risus libero. Sed venenatis mauris sit amet efficitur venenatis. In ut tellus volutpat, hendrerit ligula ut, semper lectus. Sed lacinia dictum nibh feugiat mollis. Nam ut neque libero. Morbi quis lorem convallis mi aliquam fringilla at vitae massa. Mauris convallis velit lacus, quis gravida purus pharetra sed. Vestibulum hendrerit, urna vitae mollis efficitur, mi nisi pellentesque metus, sed suscipit ipsum ligula quis erat. Suspendisse lobortis nunc non dui feugiat vehicula. Quisque at mi vel enim ultricies rhoncus. Maecenas imperdiet quis sapien nec mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
​
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci eros, sollicitudin mattis dolor id, accumsan porttitor augue. Sed quam velit, ultrices a elit condimentum, porttitor gravida magna. Fusce a leo massa. In vestibulum rutrum urna vel luctus. Praesent ornare mi elit, a mollis purus vestibulum eu. Vivamus suscipit justo consequat tortor luctus imperdiet. Sed tempus, lacus at rutrum ultrices, turpis dui laoreet velit, at sagittis purus turpis sed ligula. In semper consequat lectus vel sodales. Pellentesque viverra sapien nec dui fermentum sodales. Donec quis turpis varius, porta enim nec, rutrum lacus.
    
                            Nulla dui felis, efficitur a elit ut, scelerisque interdum sem. Mauris eros ligula, imperdiet in nisl porttitor, mattis suscipit nulla. Nullam posuere, risus eu semper pretium, justo felis mollis felis, ut pulvinar odio mi ac magna. Etiam et mauris elit. Duis pharetra ultricies felis eget pretium. Aenean cursus in elit nec congue. Nunc imperdiet magna non lorem malesuada, id condimentum dui lobortis. Mauris volutpat diam nibh, vitae finibus justo suscipit et. Aliquam erat volutpat. Fusce sit amet imperdiet urna. Aenean eleifend semper augue, at ultricies metus tempor in.
    
                            Fusce ultrices vehicula nunc a imperdiet. Maecenas condimentum mauris commodo metus vehicula laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce pharetra posuere erat, eget consectetur enim dignissim id. Nam vitae risus libero. Sed venenatis mauris sit amet efficitur venenatis. In ut tellus volutpat, hendrerit ligula ut, semper lectus. Sed lacinia dictum nibh feugiat mollis. Nam ut neque libero. Morbi quis lorem convallis mi aliquam fringilla at vitae massa. Mauris convallis velit lacus, quis gravida purus pharetra sed. Vestibulum hendrerit, urna vitae mollis efficitur, mi nisi pellentesque metus, sed suscipit ipsum ligula quis erat. Suspendisse lobortis nunc non dui feugiat vehicula. Quisque at mi vel enim ultricies rhoncus. Maecenas imperdiet quis sapien nec mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
​
                      </div>
                    </div>
                    <div class="col-3 d-none d-lg-block">right</div>
                </div>
            </div>
        </body>
    </html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers