HTML - Split page vertically in two halves and allow individual scrolling-CodePudding

I want to create a website in HTML.

To do this, the page should first be divided vertically into two parts. In it I would like to display different posts (imagine it like a twitter post). In addition, however, each half should be independently scrollable. If I scroll through the left side, the right side should stay exactly how it is.

Thank you

CodePudding user response：

Your question is a bit ambiguous, it would make sense to elaborate. I will answer the question the way I interpret it.

To split your website into two parts which are independently scrollable, I would use two sections which each take up half of the screen. The content of the website would exist inside these two sections.

To make the sections scrollable, you can use overflow-y: auto. This means that if the content of the sections does not fit (meaning it takes more than half a page), it will not be displayed outside the section, but instead be accessible through a scroll bar.

Below you find a sample implementation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Split Site</title>
    <!-- everything above here is boilerplate code and not further relevant -->
    <style>
        body {
            display: flex; /* prevents weird whitespace issues */
            margin: 0; /* makes the website take up the whole window */
        }

        section {
            display: inline-block; /* inline: allows multiple side by side. block: allows for more complex styling */
            width: 50%; /* make each section have a width of 50% of the window */
            height: 100vh; /* make the sections take up 100% of the vertical height of the window */
            overflow-y: auto; /* if the content of a section does not fit, the section will be scrollable vertically (on the y axis) */
            /* the following css is irrelevant styling */
            font-size: 20vmin;
            word-wrap: break-word;
        }

        section:nth-child(1) {
            background-color: yellow;
        }
        section:nth-child(2) {
            background-color: beige;
        }
    </style>
</head>
<body>
    <!-- the two sections and their content (the posts would be where the lorem ipsum text currently is)-->
    <section>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, tenetur?
    </section>
    <section>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, earum!
    </section>
</body>
</html>

CodePudding user response：

Try to call two in the body,this could help you to split the window in two vertically sections,then give them this CSS rules:

#section1{
position:absolute
top:0;
bottom:0;
left:0;
width:50vw;
height:100vh;
}

#section2{
position:absolute
top:0;
bottom:0;
right:0;
width:50vw;
height:100vh;
}

Finally,you should add some JavaScript to get only one section 'scrollable'. I hope you appreciate it, enjoy ! ;)