Question

我正在创建一个Bootstrap页面，左侧边栏中有两个导航 - 顶部对齐导航和底部对齐导航。

以下是他们想要的东西，我在解决问题时遇到的问题 - 他们希望能够在视口水平狭窄以查看所有内容时向上和向下滚动侧边栏。 < / p>

解决方案1 -

根据下面的代码，我绝对可以将底部导航定位在侧边栏的底部。

问题解决方案1 -

我在这个解决方案中看到的问题是，当滚动时，绝对定位的较低导航会在上部导航的顶部显示，因为它不在文档流中。

解决方案2 -

我尝试将侧边栏设置为表格，将底部导航设置为表格行。

解决方案2的问题 -

这会将底部导航设置到底部，但侧边栏仍然不会滚动。

我可以尝试其他任何想法吗？

HTML -

<div class="row">
    <aside class="col-sm-3 sidebar">
        <nav class="top-nav">
            <a href="#"><i class="icon-uniE603"></i>Foo</a>
            <a href="#" class="active"><i class="icon-uniE723"></i>Foo</a>
        </nav>
        <nav class="lower-nav">
                <h1>Recent Pages</h1>
                <a href="#">Foo</a>
                <a href="#">Foo</a>
        </nav>
    </aside>
    <main class="col-sm-9">
        <header class="page-header pull-right"><i class="icon-uniE603 header-icon provider-icon"></i>
            <h1>Home</h1></header>
        <h1>Welcome</h1>
        <p>
            Risea lettuce kohlrabi amaranth water spinach avocadf We'll help you manage and market your practice reens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado.
        </p>
    </main>
</div>

CSS -


/* First Solution - Styling with absolute positioning */

    .sidebar {
        overflow: auto;
        position: fixed;
        top: 0;
        bottom: 0;
        display: block;
    }

    .lower-nav {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100% ;
    }


/* Second Solution - Styling with table positioning */

    .sidebar {
        overflow: auto;
        display: table;
        table-layout: fixed;

    }

    .lower-nav {
        display: table-row;
        vertical-align: bottom;
    }

如何将容器div设置为溢出样式：当子div完全定位时滚动

0 个答案: