Html 并排分割，宽度自动调整

你好，堆栈溢出用户。 我在这里有点挣扎，我有4个分区

我想为第4版有它的宽度调整，如果屏幕大小调整。基本上只需保持在其他分区内，并进行调整。 div1、2和3都有

position:fixed

，以避免用户在页面上滚动时移动它们

但是无论我尝试什么，使用

width:auto

等等，div4都会在div3后面一直运行。我设置了一个边距，让它通过div1的宽度和长度

我一直很难理解这一点，下面列出了我的div代码

第4部分未列出，因为代码不起作用。非常感谢您的帮助。

请尝试此代码

.div4{ width:calc(100% - 730px);
       background-color: green;
       margin:0 auto;
       position:relative;
       top:60px;}

---

其中730px是左、右div宽度之和…

为每个div宽度指定一个等于100%的宽度。给左分区20%，给4分区60%，给右分区20%。或者，使用现有代码，将第四个div设置为100%。

使用导航栏左侧、导航栏右侧和中间部分的百分比

不要忘了为左右div设置

top:60px

（导航栏顶部的高度）

/**CSS:**/
div{
位置：相对位置；
框大小：边框框；
}
.导航栏顶部{
位置：固定；
宽度：100%；
高度：60px；
排名：0；
左：0；
z指数：2；
}
.导航栏左{
位置：固定；
宽度：20%；
身高：100%；
顶部：60px；
左：0；
z指数：1；
}
.导航栏对吗{
位置：固定；
宽度：20%；
身高：100%；
顶部：60px；
右：0；
}
我的身体{
宽度：60%；
利润率：60px自动0px；
}
.导航栏顶部{
背景：蓝色；
}
.导航栏左{
背景：红色；
}
.导航栏对吗{
背景：绿色；
}
.导航栏顶部{
背景：小麦；
}

导航栏顶部
导航栏左
导航栏右侧
我的身体躺在海洋上。。。哼哼哼

试试这个

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

在main div中，要设置宽度，请使用以下命令：

宽度：计算（100%-400px）； 其中400px是两个侧边栏的宽度之和

HTML

---

这可能是我想要的，但是我只希望当屏幕区域被降低时，div4会变小一些。你也可以把20%放在现有代码的最小宽度上。不要给第四个div指定最小宽度，但要给它80%。试着玩一下。干杯，我完全忘记了最小宽度。啊。当这种情况发生时，你会恨。Haha@Codey93很抱歉代码现在已更新。希望有帮助。

.div4{ width:calc(100% - 730px);
       background-color: green;
       margin:0 auto;
       position:relative;
       top:60px;}

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

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