显示CSS：一些div固定，一些灵活 [英] Display CSS: some divs fixed, some flexible

问题描述

我需要在我的网站发生以下事情：
计数器和标志（顶部，底部）应该始终具有相同的高度，并保持在顶部和底部，即使屏幕高度将减少/增加。但是当窗口改变时，其他两个div之间应该更小/更大。我希望这个例子更容易理解：

I need the following to happen in my website: The counter and logo (top, bottom) should always have the same height and stay on the top and bottom even though the screen height will decrease/increase. BUT the 2 other divs in between should get smaller/bigger when the window changes. I hope with this example its easier to understand:

当屏幕高度过低时，标志将消失。这里是css：

The logo will disappear when the screen height is too low, right now. Here is the css:

这个部分是80％的宽度，除了20％，但在这里真的很重要...

The section is 80% width and aside 20%, but that doesnt really matter here...

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

推荐答案

@Rémi ，但我建议使用position：fixed。

@Rémi offered a good start, but I would recommend using position: fixed.

这会将您的元素锚定到浏览器窗口，而不考虑您的内容量。

This will anchor your elements to the browser window, regardless of the amount of your content.

例如：

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

这篇关于显示CSS：一些div固定，一些灵活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！