zoukankan      html  css  js  c++  java
  • CSS 使用Flex布局让元素保持在页面底部

    在实际的开发中,遇到了一个问题,要求保持一个元素一直保持在页面底部, 本来可是使用absolute或者fixed布局来实现,不过又有要求当页面有滚动条时要保持在页底。如图所示。

    要求蓝色的部分一直保持在页底,绿色的部分的高度可能会变化,当绿色的部分太高时,要求蓝色的部分随滚动条滚动并在底部。

    可以使用JS进行调整,不过简单的用flex布局实现。

    <div class='flex-box'>
        <div class='variable'></div>
        <div class='bottom'></div>
    </div>

    可以让上面的元素flex-start, 下面的元素flex-end。

    .flex-box {
        display: flex;
        min-height: 100%; /×保证父节点至少占满高度×/
        flex-flow: row wrap;/×使用行布局,并可以换行。×/
        width: 300px;
    }
    .variable {
        width: 100%;
        height: 100px; /×这个高度会不停改变×/
        background: green;
        align-self: flex-start;
    }
    .bottom {
        width: 100%;
        height: 50px;
        background: blue;
        align-self: flex-end;
    }
  • 相关阅读:
    游标cursor
    SQL: EXISTS
    LeetCode Reverse Integer
    LeetCode Same Tree
    LeetCode Maximum Depth of Binary Tree
    LeetCode 3Sum Closest
    LeetCode Linked List Cycle
    LeetCode Best Time to Buy and Sell Stock II
    LeetCode Balanced Binary Tree
    LeetCode Validate Binary Search Tree
  • 原文地址:https://www.cnblogs.com/rixin/p/4060709.html
Copyright © 2011-2022 走看看