Div(s) 在两个固定元素（页眉和页脚）之间

Question

这是我想要做的：

希望我已经用图片解释清楚了。我在这个主题上搜索了很多，但我真的不想涉及大量的功能。我想尽可能简单地解决它。

问题是因为如果用户更改浏览器大小或在不同屏幕上显示，我希望所有内容都能够实时响应。

此外，关于在左侧菜单中添加这些图像；它们是 1:1 边长比，但我想将它们缩放到一起，它们将是左侧菜单（图片中的蓝色）的 100% 高度。

这是我目前的情况：

HTML/CSS:

header {
   background-color: red;
   position: relative;
   width: 100%;
}

#allContents {
   position: relative; /*minus širina headerja in footerja!!*/
   height: 100%;
   width: 100%;
   float: left;
   clear: both;
   z-index: 10;
}

#leftMenu {
   position: relative;
   background-color: green;
   width: 10%;
   height: 100%;
   z-index:10; 
}

#mainContent {
   background-color: yellow;
   size: 20%;
   float: left;
   position: relative;
}

#rightMenu {
   background-color: orange;
   float: left;
   position: relative;
   top: 0;
   right: 0;
   width: 25%;
}

footer {
   clear: both;
   background-color: blue;
   position: fixed;
   bottom: 0px;
   width: 100%;
}

<header>
   Fixed. Some header content... also image on the left.
</header>

<div id="allContents">
   <div id="leftMenu">On left, between header and footer, but never behind. Always between.</div>
   <div id="mainContent">Between all 4 elements. Here will be main content with scrolling.</div>
   <div id="rightMenu">Div with some news.</div>
</div>

<footer>
   Fixed footer.
</footer>

Answer 1

听起来您会从使用 Flexbox 中获益匪浅。它们允许您使用 CSS 格式化您想要的确切结构，并且它们响应 window 大小。 Flexbox Froggy 是学习如何使用它们的重要资源。

Answer 2

你在找这个吗？

header {
   background-color: red;
   position: relative;
   width: 100%;
}

#allContents {
   position: relative; /*minus širina headerja in footerja!!*/
   height: 100%;
   width: 100%;
   float: left;
   clear: both;
   z-index: 10;
    display: -webkit-flex;
    display: flex;
}

#leftMenu {
   position: relative;
   background-color: green;
   width: 10%;
   height: 100%;
   z-index:10; 
 
}

#mainContent {
   background-color: yellow;
   size: 20%;
   float: left;
   position: relative;
 
}

#rightMenu {
   background-color: orange;
   float: left;
   position: relative;
   top: 0;
   right: 0;
   width: 25%;
  
}

<header>
   Fixed. Some header content... also image on the left.
</header>

<div id="allContents">
   <div id="leftMenu">On left, between header and footer, but never behind. Always between.</div>
   <div id="mainContent">Between all 4 elements. Here will be main content with scrolling.</div>
   <div id="rightMenu">Div with some news.</div>
</div>

<footer>
   Fixed footer.
</footer>

Div(s) 在两个固定元素（页眉和页脚）之间

Div(s) between two fixed elements (header and footer)

html

css

position

fixed