How to show scrollbar when the inner content is aligned to bottom?


Tags: html,css

Problem :

I have two divs, the 'outer' and the 'inner' like this:
http://jsfiddle.net/WVd9Q/2/

[HTML]

<div class="outer">
    <div class="inner">
        <p id="content">Lorem ipsum dolor sit amet...</p>
    </div>
</div>

[CSS]

    .outer {
        width:100%;
        height:100%;
        left:0;
        top:0;
        position:absolute;
        overflow-y:scroll;
        z-index: 100;
    }
  .inner {
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        width:100%;
        min-width:400px;
        max-width:800px;
        margin: auto;
    }

As you can see, the outer covers whole page and the inner is aligned to bottom.
But when you click the [make it long] button to make the inner long, the outer doesn't show a scroll-bar.
It shows the scroll-bar if I change bottom:0 to top:0 in the .inner as I expected.

How can I show the scroll-bar of the outer with bottom-aligned inner?

appended
Okay, this fiddle is the final form that I wanted. Thank you!

[HTML]

<div class="outer">
    <div class="inner">
        <div class="content">
            <p id="text">Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
</div>

[CSS]

body {
    overflow-y:hidden;
}
.outer {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    z-index: 100;
}
.inner {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    max-height:100%;
    overflow-y:auto;
}
.content {
    min-width:400px;
    max-width:800px;
    margin: auto;
}


Solution :

Working fiddle here.

As Doxick mentioned what I did was to remove overflow-y from your outter, set a height for your inner div, and add the overflow-y:sroll to it as well.

.outer {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    z-index: 100;
}
.inner {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    overflow-y:scroll;
    max-height:100%;
    min-width:400px;
    max-width:800px;
    margin: auto;
}

    CSS Howto..

    How to make links in line

    With CSS, how would I align this banner and navigation menu to XHTML 1.0 Strict specifications?

    CSS: How to add icon/image after input element

    How to disable animation in a specific element in CSS

    How to do expand and collapse for table column in html file?

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    How can i make the horizontal navigation menu center aligned

    How to change the width of bootstrap popover

    Shadow DOM: how to apply CSS style only if the host element is ?

    how to show button and images in one line using css

    How to override CSS style for a specific element if its parent has a specific class

    How-to mix fixed and percentage heights/width using css without javascript

    How can i give transparency effect in CSS?

    How to make last element of second level of menu to drop up?

    How to trigger div visibility when hovering over list item in CSS?

    How to justify short text inside fill fixed width parent with CSS?

    how to make the osx-like border on css?

    How to change this script into

    How to change styling of a specific div onhover of another element when divs share an id

    How can I resize the height of an image to crop with the browser window?

    How to toggle single element with this same class like another

    How to get cards with his content perfectly alligned

    CSS - How to insure that a input will be in the middle of a specific area

    How to remove the background in a slick carousel?

    How combine multiple media destinations (screen, print) with width restriction?

    How to create a CSS border surrounding an input box?

    How to style a parent element when the mouse is over a child element?

    How to set height of my web page in html5

    How to implement a CDN failsafe for css files?

    How to repeat multiple images over one element using CSS