html - 并排放置，宽度自动调整

Question

你好 Stack 溢出用户。 我在这里有点挣扎，我有 4 个 div。

如果调整屏幕尺寸，我希望 div 4 的宽度也随之调整。基本上只是留在其他 div 内，并进行调整。 Div 1、2 和 3 都有 position:fixed 以避免用户在页面上滚动时它们移动。

但无论我尝试什么，使用 width:autoETC。 div 4 一直在 div 3 之后的整个长度。我为它设置了一个边距以通过 div 1 的宽度长度。

我一直难以理解这个问题，下面列出了我的 div 的代码。

.navbar-left {
  position: fixed;
  width: 325px;
  top: 0px;
  bottom: 0;
  z-index: 1001;
  height:auto;
}

.navbar-top{
 width:100%;
 height:60px;
 position:fixed;
 top:0;
 z-index:1002;
}

.navbar-right{
  width: 365px;
  top:0;
  height:100%;
  position:fixed;
  right:0;
}

Div 4 未列出，因为代码无效。非常感谢任何帮助。

Answer 1

试试这个 fiddle

如果您需要使用固定位置(我真的不明白为什么)，您可以对主 div 使用百分比，对侧边栏使用像素。

在主 div 中设置宽度使用这个:

宽度:计算(100% - 400px)； 其中 400px 是两侧边栏宽度的总和

HTML

 <div clas="container">
  <div class="top">top</div>
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
</div>

CSS

.container {width: 100%; height: 100%;}
.top {
  position: fixed;
  clear: both;
  width: 100%;
  height: 20%;
  background-color: #d5d5d5;
}

.left {
  position: fixed;
  top: 20%;
  width: 40px;
  float: left;
  height: 80%;
  background-color: green;
}
.main {
  width: calc(100% - 80px);
  height: 80%;
  position: fixed;
  top: 20%;
  left: 40px;
  background-color: grey;

}
.right {
  width: 40px;
  height: 80%;
  position: fixed;
  top: 20%;
  right: 0;
  background-color: green;
}