Question

我想定位：将导航修复到浏览器窗口的左侧（100％高度）。然后在右侧我想将一个subnav修复到浏览器窗口的顶部（100％宽度），这样当页面滚动时，两个导航都会粘住。如果窗口调整大小，条形总是100％运行。

我几乎拥有它，唯一的问题是顶部导航栏没有考虑左侧导航的宽度。所以它可以让你横向滚动。这是我的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>

帮助??谢谢！

Answer 1

您可以使用calc函数使.rightpage宽度正确。

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;
}

查看此codepen demo

Answer 2

你可以添加

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;
}

编辑：...我可能会将-moz-box-sizing:border-box; box-sizing: border-box;添加到此元素中。它会阻止你的100％元素超出填充范围。

2固定导航栏全浏览器宽度和高度

2 个答案: