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

【问题标题】：2 Fixed navigation bars full browser width and height2 固定导航栏全浏览器宽度和高度
【发布时间】：2014-04-18 04:09:25
【问题描述】：

我想定位：修复浏览器窗口左侧的导航（100% 高度）。然后在右侧，我想将一个子导航固定到浏览器窗口的顶部（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>

帮助？？谢谢！

【问题讨论】：

标签： html css navigation position fixed

【解决方案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

【讨论】：

是的，这正是我想要的！谢谢！浏览器对 calc 函数的支持如何？我在很多不同的网站上都看到过这种nav结构，你认为他们大多使用calc函数的方法吗？还是有更好的做法？
您可以查看完整的兼容性图表caniuse.com/#search=calc">here</a>。桌面浏览器的支持还不错，但 Android 和较旧的移动版 Safari 不太好。您可以考虑使用百分比宽度来避免这种情况, 支持媒体查询。或者你可以这样做：codepen.io/the_ruther4d/pen/2bc0ae867f211fbc9836bf55be5e3abb/…
太棒了。谢谢你的帮助，乔希。我的第一次 stackoverflow 体验非常棒！
很高兴听到@Jake86atx！

【解决方案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% 元素超出填充范围。

【讨论】：

我已经在容器 div.rightpage 上设置了左侧填充。这样就可以了，问题是我的内容向右超出了 200 像素。因此，当我调整窗口大小时，文本会换行，但超出范围。
是的，您希望设置宽度的框大小。填充将其推出，但盒子尺寸会弄乱它。您还需要将 box-sizing 与实际答案一起使用，以防您的填充将其推出。这是一个很好的做法。