HTML

Question

我想在 HTML 中创建一个网站。

为此，首先应将页面垂直分为两部分。我想在其中显示不同的 posts（把它想象成一个 twitter post）。此外，然而，每一半都应该是独立滚动的。如果我滚动左侧，右侧应该保持原样。

谢谢

Answer 1

你的问题有点模棱两可，细说一下。我会按照我的理解来回答这个问题。

为了将您的网站分成两个可独立滚动的部分，我会使用两个部分，每个部分占据屏幕的一半。网站的内容将存在于这两个部分中。

要使部分可滚动，您可以使用 overflow-y: auto。这意味着如果部分的内容不适合（意味着超过半页），它将不会显示在部分之外，而是可以通过滚动条访问。

下面是一个示例实现。

<!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>

HTML - 将页面垂直分成两半并允许单独滚动

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

frontend

web-site-project