2 Fixed navigation bars full browser width and height

StackOverflow https://stackoverflow.com/questions/23147226

Question

I want to position:fix a navigation to the left side of the browser window (100% height). Then on the right side I want to fix a subnav to the top of the browser window (100% width) so that as the page scrolls, both navs stick. And if the window is resized, the bars always run 100%.

I almost have it, the only problem is that the top navbar doesnt take into account the width of the left nav. So it lets you scrolls laterally. Here's my html/css:

     html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
}

    div.leftnav {    
        width: 160px;
        height: 100%;
        float: left;
        display: inline;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 20px;
    }

    div.rightpage { 
        float: left;
        margin: 0;
        padding-left: 200px; 
        width: 100%; 
        height: 100%; 
    }

    div.rightpage div.topnav {
        width: 100%;
        height: 20px;
        float: left;
        position: fixed;
        top: 0;
        margin: 0;
        padding: 15px;
        display: inline;
    }

    div.rightpage div.content {
        padding: 50px;
        min-height: 1200px;
    }

    <body>
        <div class="leftnav">
        </div>
        <div class="rightpage">
            <div class="topnav"></div>
            <div class="content"></div>
        </div>
    </body>

Help?? Thanks!

Was it helpful?

Solution

You could use the calc function to make the .rightpage the correct width. 

html, body {
  width: 100%;
  height: 100%;
}

.leftnav {
  width: 160px;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: blue;
}

.rightpage {
  width: calc(100% - 160px);
  height: 100%;
  margin-left: 160px;
  background: red;
}

.topnav {
  width: 100%;
  height: 40px;
  left: 160px;
  top: 0;
  background: green;
}

Check out this codepen demo

OTHER TIPS

You could add

div.rightpage div.topnav {
    width: 100%;
    height: 20px;
    float: left;
    position: fixed;
    top: 0;
    margin: 0;
    padding: 15px 15px 15px 160px; //Would force the whole of topnav content to the left 160px..
    display: inline;
}

Edit:... I would potentially add -moz-box-sizing:border-box; box-sizing: border-box; to at least this element. It will prevent your 100% elements from going out of bounds from the padding.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top