Search code examples
htmlcssnavigationpositionfixed

2 Fixed navigation bars full browser width and height

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!

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