我可以通过CSS中的内容使高度自动

发布于 2025-02-06 23:31:19 字数 1470 浏览 2 评论 0原文

我制作了主部分和一个侧面部分，我希望侧面部分发粘，直到内容的末尾我尝试了多种方法，但它不起作用，请帮助

<body>
 <main>
        <div class="container">
            <div class="main-content">
                <section>
                    <h1>Lorem, ipsum dolor.</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, quia illo! Quasi quis esse facere. Modi tenetur nesciunt pariatur distinctio perspiciatis, consequuntur, porro dignissimos, sit quae quas veritatis quos maxime?</p>
                    <img src="" alt="">
                </section>
            </div>
        </div>
    </main>
    
    <!-- main -->
    <!-- aside -->
    
    <aside>
        <div class="container">
            <div class="aside-content">
                <section>
                    <h1>Lorem, ipsum dolor.</h1>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed saepe voluptates id nam fugit rem illo dolorum expedita aliquam, odio harum impedit ratione quasi, distinctio mollitia, eum totam odit! Eos!</p>
                    <img src="" alt="">
                </section>
            </div>
        </div>
    </aside>
</body>

<!-- aside -->

原文

I made the main section and a side section and I want the side section to be sticky until the end of the content I tried many ways but it didn't work please help

<body>
 <main>
        <div class="container">
            <div class="main-content">
                <section>
                    <h1>Lorem, ipsum dolor.</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, quia illo! Quasi quis esse facere. Modi tenetur nesciunt pariatur distinctio perspiciatis, consequuntur, porro dignissimos, sit quae quas veritatis quos maxime?</p>
                    <img src="" alt="">
                </section>
            </div>
        </div>
    </main>
    
    <!-- main -->
    <!-- aside -->
    
    <aside>
        <div class="container">
            <div class="aside-content">
                <section>
                    <h1>Lorem, ipsum dolor.</h1>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed saepe voluptates id nam fugit rem illo dolorum expedita aliquam, odio harum impedit ratione quasi, distinctio mollitia, eum totam odit! Eos!</p>
                    <img src="" alt="">
                </section>
            </div>
        </div>
    </aside>
</body>

<!-- aside -->

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心凉怎暖 2025-02-13 23:31:19

具有位置的元素：粘性;根据用户的滚动位置定位。

具有位置的元素：固定;是相对于视口定位的，这意味着即使页面滚动，它始终保持在同一位置。

<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>



<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

An element with position: sticky; is positioned based on the user's scroll position.

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>



<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

回复收藏 0 原文

~没有更多了~