html - 我希望每个部分单独出现

Question

页面有两部分。我想要在右侧的第一部分， 它需要具备以下特点: position:absolute； 左:0

https://4.top4top.net/p_1339kl3zo1.png

https://5.top4top.net/p_1339rvmaj2.png

https://6.top4top.net/p_1339lk6ch3.png

另外，蓝色部分并没有延伸到页尾，而是左边延伸到页尾才起作用。 但是用它来扩展文本。我只想扩展蓝色

而且绝对特征匹配手机的两个部分，我希望每个部分单独出现

感谢您的配合

<section class="connect_section connect_page scrollAnim1  start_anim active">
    <div class="connect_page_wrap">
        <div class="container">
            <div class="connect_page_wrap_inner">
                <div class="text">
                    <div class="text_area">
                    </div>
                </div>
                <div class="text scrollAnim1 start_anim">
                </div>
            </div>
        </div>
    </div>
</section>

<main class="connect_main">
    <div class="connect">
        <div class="container">
            <div class="convertastion">
                <div class="d_test_el_wrap" style="padding-top: 80px">
                    <div class="d_test_el" contenteditable="true" style="width: 100%;min-height: 50px;">
                        ...
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>

 .connect_page {
        height: auto;
        padding: 148px 0 153px;
    }
    .connect_page.connect_section {
        width: 100%
    }
    .connect_section {
        height: 238px;
        background: #272a2c;
        width: 100%;
        opacity: 0;
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        transition: 0.5s
    }
    .connect_main .container {

        padding: 0 4.3vw

    }
    @media screen and (max-width:1024px) {
        .connect_main {
            width: 100%;
            -webkit-box-ordinal-group: 0;
            -moz-box-ordinal-group: 0;
            box-ordinal-group: 0;
            -webkit-order: 0;
            -moz-order: 0;
            -ms-flex-order: 0;
        }
    }

Answer 1

对于左侧的全高侧边栏，您应该使用:

height: 100vh
width: 200px;
position: fixed; // or absolute
top:0;
left:0;

此外，当您将属性设置为 position:absolute 时，高度只会设置为提到的特定高度；您需要设置 position: fixed 来固定侧边栏。

查看现场演示-> https://codepen.io/Rockingpg0/pen/NWKveNq