侧边导航中的 position 文本和图像

Question

我如何 position 在视口底部类似于页脚的居中文本或徽标（图 2）？ 当下拉菜单（图 3）打开时，徽标或文本应相应移动到新高度。

所以第 5 点以下的 div 应该动态改变它的高度或离开站点以防万一。

我尝试了几个我之前在谷歌上搜索过的解决方案，但不知何故都没有像我想要的那样工作。

Answer 1

如果您知道页脚的高度，那么您可以使用最小高度、绝对定位和填充底部。 但是，我将假设您不知道高度的更困难的情况。

<style>
    * {box-sizing:border-box;}
    .wrapper {min-height:100vh;display:flex;flex-direction:column;}
    .main {flex:1 0 auto;}
    .footer {background-color:yellow;padding:16px;font-weight:bold;flex:0 0 auto;}
</style>

<div class="wrapper">
    <div class="main">
        <h1>
            Main
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet, nibh id placerat viverra, justo purus semper dolor, at lacinia eros mauris eu libero. In finibus a urna dapibus tempus. Aenean ipsum urna, tempor at lectus non, blandit feugiat quam. Donec sed ante orci. Integer laoreet est erat, a feugiat leo posuere sed. Mauris sit amet metus finibus, dapibus nunc ut, molestie erat. Nullam rhoncus sagittis lacus id finibus. Etiam sollicitudin nibh dui, a mollis nisl pharetra vitae. Suspendisse nec laoreet ipsum. Fusce sit amet tempor sem. Vestibulum consequat est in nisl aliquam ornare. Aliquam erat volutpat.
        </p>        
        <p>
            Sed vulputate nisl ac est eleifend bibendum. Nullam cursus at ex sit amet dignissim. Sed blandit pretium venenatis. Phasellus at ullamcorper nibh. Aenean nec lectus semper, efficitur diam in, luctus nisi. Phasellus in ligula congue, cursus nunc et, luctus mi. Suspendisse a leo luctus, molestie elit sed, venenatis sem. Nullam lobortis ante nec dictum elementum. Praesent aliquam orci quis molestie consectetur. Aliquam ornare a ipsum dapibus pulvinar. Morbi aliquet posuere ligula, vel volutpat dolor pellentesque vel. Vivamus non euismod leo. Duis feugiat velit a est tincidunt pulvinar. Proin blandit malesuada pulvinar. Nunc ut elementum ex, non vehicula tortor.
        </p>
    </div>

    <div class="footer">
        Footer
    </div>
</div>

上下改变浏览器的高度，看看它是如何工作的——原理是垂直的 flexbox 至少是屏幕的高度，而页脚始终位于底部，因为主要内容会增长以填充任何空闲空间。