Display CSS: some divs fixed, some flexible

问题

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:

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

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

回答1:

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

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

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

回答2:

It's a little tricky but I discovered by doing it that it is actually doable without javascript. Here is a fiddle to illustrate it http://jsfiddle.net/2LyUy/3/

You have to do 3 things:

wrap your two middle divs in a new div, for example with id="wrap".
put a different position attribute on your aside (for example "relative", which will actually not move your div at all)
then have fixed size counter and logo

The css gives that (don't forget to wrap your 2 middle divs with a new one):

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

Here is the div wrapping code extract:

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

来源：https://stackoverflow.com/questions/19893578/display-css-some-divs-fixed-some-flexible

标签

html

css

fixed