<...">
Geek Answers Handbook

Fixed height overflow scrolling y axis

I seem to have a simple problem:

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>​

I have 3 divs inside the container: A and B have fixed heights. C must have a retractable height, it extends along with the height of the container. If the content inside C is too large, I would like C to scroll, but to keep A and B in one place.

Code in: http://jsfiddle.net/V2c9G/

I can not do it.

I tried:

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="xxx" style="overflow-y:scroll">
       <div class="c"></div>
    </div>
</div>​

without success. The container container that it should change in the browser.

A complex example would be http://www.sencha.com/examples/#overview (I'm talking about the layout, making the browser smaller, and you will see scrolls of apperaring hile headers are fixed), but this is not a solution, because it uses JS to recalculate heights.

Any idea?

+5
8

3:

, CSS Edit 2 , JavaScript divs . CSS , JavaScript, JavaScript , , JavaScript , . . , JavaScript:

var resizeDiv = function(){
    document.getElementById('c').style.height = getWindowHeight() - 64 + 'px';
};

//Framework code
var getWindowHeight = function(){
    if (window.innerHeight) {
        return window.innerHeight;
    }
    if (document.body && document.body.offsetHeight) {
        return document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetHeight ) {
        return document.documentElement.offsetHeight;
    }

    return 740;//provide a default height as a fallback
};

//resize on pageload
window.onresize = resizeDiv;
setTimeout(resizeDiv);



, div, ( , ), div div , . .

Edit:

", " ( , ), , , "" div "". .

# 2:

, , . a, b ca ( , ). , , , , . , - , . . , , , 2 . div , window.resize div, .

. , , W3C , !

+1

, - : http://jsfiddle.net/QsLFt/. , , divs, , ?

+1

overflow-y:scroll .container

,

http://jsfiddle.net/v4ZtN/

( ):

Css:

.container{
    background-color: red;
    width: 90%;
    margin: 0 auto; 
    height:220px;
}

.a{
   background-color: yellow;
   height: 30px;  
   margin: 2px;    
}

.b{
   background-color: blue;
   height: 30px;
   margin: 2px;    
}

.c{
   background-color: green;
   overflow-y: scroll;    
   height:inherit;
}

Html:

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"><img src="http://www.boingboing.net/images/_documents_anemone_images_anemone850-1.jpg" alt=""/></div>
</div>

: 2 ( )

.c .

.c{
       background-color: green;
       overflow-y: scroll;    
       height:100%;
    }

: http://jsfiddle.net/XM4gH/6/

+1

div , , ; jsfiddle

0

, jsFiddle, , .container:

    overflow:hidden;

.c div, .

0

anser ? 

.container{
    background-color: red;
    width: 90%;
    margin: 0 auto;

    height: 315px;
}
.a{
   background-color: yellow;
   height: 30px;  
   margin: 2px;    
width: 90%;
}


.b{
   background-color: blue;
   height: 30px; 
   margin: 2px;    
width: 90%;
}

.c{
   background-color: green;
   height: 250px; 
   margin: 2px; 
width: 90%;    
   overflow-y: scroll;    
}
​
0

, , , :

  • ,
  • , , . , , (250 ), , . , , . 132px. , , .
0

More articles:


All Articles