Question

问题是，我有一个230px宽的双面固定导航菜单，现在我想制作一个100％宽度的固定顶部导航栏。

但是当我在顶部导航栏中添加右浮动的任何元素时，元素都被隐藏了，因为条形图的宽度为100％加上侧边栏的230px。

＆＃13;

nav#fixed-nav-top {
  position: fixed;
  top: 0;
  left: 230px;
  z-index: 9999;
  width: 100%;
  height: 50px;
  border-left: 1px solid #191b1b;
  background-color: #141616;
  border-bottom: 1px #252525 solid;
}

nav#nav-sided {
  position: fixed;
  font-family: "Helvetica"; /* Tahoma */
  color: #c1c1c1;
  height: 100%;
  width: 230px;
  top: 0;
  left: 0;
  background-color: #262626;
  border-right: 1px #252525 solid;
  z-index: 8888;
}

＆＃13;

<nav id="fixed-nav-top">
  <div id="top-main">

  </div>
  <div id="user-area">

  </div>			
</nav>
<nav id="nav-sided">	
  <div id="logo">
    <div class="main-logo">:)</div>
  </div>

  other stuffs
</nav>

＆＃13;

Answer 1

使用您当前的样式，而不是width:100%（删除此内容），添加right:0：

nav#fixed-nav-top {
    position: fixed;
    top: 0;
    left: 230px;
    right:0;
    z-index: 9999;
    height: 50px;
    border-left: 1px solid #191b1b;
    background-color: #141616;
    border-bottom: 1px #252525 solid;
}

示例：

nav#fixed-nav-top { position: fixed; top: 0; left: 230px; right:0; z-index: 9999; height: 50px; border-left: 1px solid #191b1b; background-color: #141616; border-bottom: 1px #252525 solid; } nav#nav-sided { position: fixed; font-family: "Helvetica"; /* Tahoma */ color: #c1c1c1; height: 100%; width: 230px; top: 0; left: 0; background-color: #262626; border-right: 1px #252525 solid; z-index: 8888; }

<nav id="fixed-nav-top"> <div id="top-main"> </div> <div id="user-area"> </div> </nav> <nav id="nav-sided"> <div id="logo"> <div class="main-logo">:)</div> </div> other stuffs </nav>

Answer 2

你不需要calc或任何花哨的东西，这很简单。当然，如果您愿意，可以将侧边栏设置在导航栏上方，此处位于导航栏下方。

注意，您可以使用box-sizing: border-box让您的生活更轻松。

* {
   box-sizing: border-box; 
}
.body {
  padding-left: 200px;
  padding-top: 50px;
}
.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  padding-top: 50px;
  background: red;
}
.left {
  float: left;
}
.right {
  float: right;
}
.navbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  padding-left: 200px;
  background: black;
  color: white;
}

<div class="body">
  <div class="sidebar">Sidebar</div>
  <div class="navbar">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <div class="main">Blablabla</div>
</div>

Answer 3

式：

'a'.charCodeAt(0)

示例：JSFiddle

或：

div{
  position:absolute;
  left:230px;
  right:0px;
}

示例：JSFiddle

如何从100％宽度div中提取230px？

3 个答案: