显示 CSS：一些 div 固定，一些灵活

Question

我需要在我的网站上进行以下操作： 计数器和徽标（顶部、底部）应始终具有相同的高度并保持在顶部和底部，即使屏幕高度会减小/增加。但是当窗口发生变化时，中间的其他 2 个 div 应该变得更小/更大。我希望这个例子更容易理解：

现在，当屏幕高度太低时，徽标会消失。这是css：

该部分是 80% 的宽度和 20% 的宽度，但这并不重要...

#countdown{
padding: 0.5em 0.5em 0.5em 3em;
margin: 0.5em;}

#addProject{
margin: 0.5em;
padding: 0 1em;
height: 44%;
overflow-y: auto;}

#Nye{
margin: 0.5em;
padding: 0 1em;
overflow-y: auto;
height: 40%;
}

#logo{
margin: 1em;
height: 5em; 
}

Answer 1

@Rémi 提供了一个良好的开端，但我建议使用 position: fixed。

这会将您的元素锚定到浏览器窗口，无论您的内容有多少。

例如：

.counter, .middle1, .middle2, .logo {
    position: fixed;
    width: 20%;
    min-width: 200px;
    right:0;
}
.counter {
    background: yellow;
    top:0;
    height: 50px;
}
.middle1 {
    overflow: scroll;
    background: blue;
    top:50px;
    bottom: 50%;
}
.middle2 {
    overflow: scroll;
    background: green;
    top: 50%;
    bottom:50px;
}
.logo {
    background: pink;
    bottom:0;
    height: 50px;
}

见http://jsfiddle.net/uKPEn/1/

Answer 2

这有点棘手，但我发现它实际上可以在没有 javascript 的情况下使用。这是一个小提琴来说明它http://jsfiddle.net/2LyUy/3/

你必须做三件事：

• 将您的两个中间 div 包装在一个新 div 中，例如使用 id="wrap"。
• 在你旁边放一个不同的位置属性（例如“相对”，它实际上根本不会移动你的 div）
• 然后有固定尺寸的计数器和标志

css 给出了这一点（不要忘记用一个新的 div 包裹你的 2 个中间 div）：

aside#test { position: relative; }
           /* so that the "absolute" below work as expected */
           /* any of "relative" "absolute" or "fixed" positioning would work here, depending on the needs */

#countdown {
    position: absolute; left:0; right:0; /* could be factored out if preferred */
    top:0; height: 150px;
}
#logo {
    position: absolute; left:0; right:0;
    bottom:0; height: 50px;
}
#wrap {
    position: absolute; left:0; right:0;
    top:150px; bottom: 50px;
}
#addProject {
    position: absolute; left:0; right:0;
    top:0; height:50%;
}
#Nye {
    position: absolute; left:0; right:0;
    bottom:0; height:50%;
}

这里是 div 包装代码摘录：

            </div></div>
        <div id="wrap">  <!-- added -->
        <div id="addProject" 
    ....
<br>
</div>
            </div> <!-- added -->
            <div .... id="logo"></div>