overflow: scroll on ui-router ui-view

Question

I've created my index.html and I want the navigation bar to be on the bottom of the screen. When the page loaded is has a lot of content i want to be able to scroll where the content is loaded, but have the navbar at the bottom of the page always stay there.

My index.html

<div class="row wrapper">
    <div class="col-md-12 scrollable">
        <div ui-view></div>
    </div>
    <div class="push"></div>
</div>

<div class="row footer" id="footer">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="myTabs">
            <li><a ui-sref="home">Home</a></li>
            <li><a ui-sref="about">About</a></li>
            <li><a ui-sref="portfolio">Portfolio</a></li>
            <li><a ui-sref="test">test</a></li>
        </ul>
    </div>
</div>

and my css scrollable class

.scrollable {
    width: 100%
    overflow: scroll;
}

Mia Sno · Accepted Answer · 2015-04-15 18:04:21Z

1

If you're using bootstrap, instead of putting footer, since it's technically just a nav that's at the bottom of the page, you can use the sticky nav structure like so:

.scrollable {
    width: 100%
    overflow-y: scroll;
}

....

<div class="row wrapper">
    <div class="col-md-12 scrollable">
        <div ui-view></div>
    </div>
    <div class="push"></div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="myTabs">
            <li><a ui-sref="home">Home</a>
            </li>
            <li><a ui-sref="about">About</a>
            </li>
            <li><a ui-sref="portfolio">Portfolio</a>
            </li>
            <li><a ui-sref="test">test</a>
            </li>
        </ul>
    </div>
</nav>

answered Apr 15, 2015 at 18:04

Mia Sno

9471 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

overflow: scroll on ui-router ui-view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related