使元素坚持专利的底部

Question

我想将元素放置在其父底部。 我无法设置其position: absolute和bottom: 0因为我的父div可能会通过缩放或在较小的显示中进行滚动（overview-y）。 如果父元素的其他元素不超过寡妇的身高，我希望该元素被卡在父元素的底部，否则该子元素将是滚动中的最后一个子元素。

那怎么可能？ 我应该使用js还是css可以做到？

TNX

Answer 1

您可以使用设置了min-height的子内容容器来匹配父容器的高度。 在内容元素的底部为页脚放置足够的填充，并使用position:absolute将页脚附加到底部。

请参见下面的代码段。

 $('.toggle').on('click', function() { $('.grey').toggleClass('big'); }); 

 .parent { border: 1px solid black; overflow: auto; height: 400px; } .content .grey { height: 40px; margin-bottom: 5px; background: grey; } .content .grey.big { height: 80px; margin-bottom: 5px; background: grey; } .content footer { height: 40px; background: orange; position: absolute; bottom: 5px; left: 5px; right: 5px; } .content { position: relative; min-height: 100%; box-sizing: border-box; padding: 5px 5px 45px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <button class="toggle">Toggle</button> </p> <div class="parent"> <div class="content"> <div class="grey"></div> <div class="grey"></div> <div class="grey"></div> <div class="grey"></div> <div class="grey"></div> <div class="grey"></div> <footer></footer> </div> </div> 

Answer 2

希望这会有所帮助

 /** * Demo Styles */ html { height: 100%; box-sizing: border-box; } body { position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; min-height:1000px; } .demo h1 { margin-top: 0; } /** * Footer Styles */ .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } 

 <div class="demo"> <h1>CSS “Always on the bottom” Footer</h1> <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> <p>However, if the content is taller than the user's viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> <p>However, if the content is taller than the user's viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> <p>However, if the content is taller than the user's viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer's parent element to be the same value (or larger if you want some spacing).</p> <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p> </div> <div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>