javascript - Overflow scroll on y axis with fixed height - Stack Overflow

admin管理员组

文章数量:1330564

I have an apparently easy problem which is:

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

I have 3 divs inside a container: A and B have fixed heights. C must have an extendable height, it extends along with the container height. If the content inside C are too big, I'd like C to scroll but to keep A and B in the same place.

Code in: /

I'm not able to 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 div it's supposed to resize along the browser.

A plex example would be (I'm talking about the layout, make the browser smaller and you will see scrolls apperaring hile the headers keeps fixed) but it's not a solution since it uses JS to recalculate the heights.

Any idea?

I have an apparently easy problem which is:

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

I have 3 divs inside a container: A and B have fixed heights. C must have an extendable height, it extends along with the container height. If the content inside C are too big, I'd like C to scroll but to keep A and B in the same place.

Code in: http://jsfiddle/V2c9G/

I'm not able to 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 div it's supposed to resize along the browser.

A plex example would be http://www.sencha./examples/#overview (I'm talking about the layout, make the browser smaller and you will see scrolls apperaring hile the headers keeps fixed) but it's not a solution since it uses JS to recalculate the heights.

Any idea?

• javascript
• css
• html

Share Improve this question Follow edited Apr 4, 2012 at 22:39 Jordi P.S. asked Apr 4, 2012 at 19:53 Jordi P.S.Jordi P.S. 4,01877 gold badges3939 silver badges5959 bronze badges 4

• I think you have a slight misunderstanding. I updated your jSFiddle. Setting overflow-y on the div with the class "c" causes it to scroll when the content inside the element gets too long. It's not entirely clear the behavior you're expecting. Can you elaborate a little? – George Mandis Commented Apr 4, 2012 at 20:00
• I'd like the green (c) div to fit into the red one (container) and the scroll to appear. I updated the fiddler. – Jordi P.S. Commented Apr 4, 2012 at 20:09
• Imagine the container is the browser. – Jordi P.S. Commented Apr 4, 2012 at 20:10
• Based on your last two ments, I have given an answer, do look into it. – Jashwant Commented Apr 4, 2012 at 20:17

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 1

Edit 3:

This is my remended solution, which uses CSS from the Edit 2 below as a fallback, but uses JavaScript to resize your divs appropriately onload and when your window size changes. The CSS solution provides a decent starting point if the client has JavaScript disabled, and the JavaScript is such that it really shouldn't affect the performance of the page, so I see no reason not to use JavaScript to perfect what you want to see. A working fiddle can be seen here. Also, here is the appropriate JavaScript code:

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.patMode=='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);

---

I think you need to adjust the absolute height on your third div to take up the rest of the space (either absolutely or with percentages), set overflow to hidden on the parent div, and let the content in the third inner div determine whether to show the scrollbar or not. Here's an updated fiddle using the absolute height method.

Edit:

From your "Imagine the container is the browser" ment (which to me means the scrollbar should be on the container), all you'd really have to do is set the overflow to 'scroll' and height in the third div to 'auto'. Here's an updated fiddle for that.

Edit #2:

According to your ment on this question, it sounds like you need to go with the percentage method. The most straightforward would be to make the height of a, b, and c a percentage (I had to tweak the margins to get it to fit for all zooms). Unfortunately with this method, the top ponents will not be fixed, and it sounds like you may be displaying static content there that would look funky. Thus, another option is to pick a minimum supported size for your browser window and adjust the percentage of the third element so that it just fits. Here's a fiddle for that. However, the downside there is that you'll have more empty space at the bottom of the page the bigger the height of the window, and you'll have 2 scrollbars below a certain height. To really do this properly with the fixed sized divs at the top, you'll need to add an event listener to the window.resize method and resize your third div when that happens appropriately based on the new size of the window.

Note: It is times like this where I wish the W3C would approve percentages plus pixels for their height, width, and other sizing properties!

I think you might be searching for something like this: http://jsfiddle/QsLFt/. However, I'm not sure how to get rid of the divs hiding the scrollbar, the easiest solution would probably be to set it a fixed width?

You need to apply overflow-y:scroll in .container

See this,

http://jsfiddle/v4ZtN/

Edit (after ments):

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/images/_documents_anemone_images_anemone850-1.jpg" alt=""/></div>
</div>

Edit:2 (after ments)

Change .c style with this.

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

Check this fiddle: http://jsfiddle/XM4gH/6/

div only show scroll when you put some data in it, here is the result; jsfiddle

Based on what's currently up on your jsFiddle, I think you can simply add this to the style declarations for your .container class:

    overflow:hidden;

You'll have to actually add content to the .c div to see any scrolling however.

did this anser is match to your request ? enter link description here

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

It's hard to tell exactly what you are trying to do based on the question, but if this is the desired result, these are the problems I discovered in your code:

1. You needed to hide overflow on the red box, so the green box does not extend beyond the container
2. In the green box, if there is enough data to extend, you want a scroll bar. This was working, but the height you had set specifically (250px) was enough to extend out of the container. You want a specific height here, the number is whatever is remaining in the container. I got 132px. Then with the overflow scroll applied, anything that extends beyond this height will be scrollable.

本文标签： javascriptOverflow scroll on y axis with fixed heightStack Overflow