显示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

这有点棘手，但我发现它实际上没有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>

Answer 2

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

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

e.g：

.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/