CODEWITHSUNDEEP
htmlcss
user1763032
user1763032

Reputation: 427

Overflow doesn't work when using display:table-cell

What I am trying to do is align divs in another div from the bottom.. The code I have right now is :

#container{
height: 375px;
display: table-cell;
width: 660px;
vertical-align: bottom;
margin:none;
overflow-y:auto;    
}

#container > div{
margin:none;
width:660px;
}

This seemed to work. But when the content inside the container div increased the height of container also increased though I have set a fixed height and overflow-y to auto. What should I do to make it work?

JsFiddle: http://jsfiddle.net/qNw7E/1/

Upvotes: 2

Views: 2145

Answers (3)

Vipul Vaghasiya
Vipul Vaghasiya

Reputation: 479

working demo or jsFiddle here ( note: i update some your html format ).

html

<div style="margin-bottom:50px;">
    <div id="container">
        <div class="hack-overflow">
            <div class="data">you data here</div>
        </div>
    </div>
</div>


<div>
    <div id="container">
        <div class="hack-overflow">
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
        </div>
    </div>
</div>

css

#container{
    height: 375px;
    display: table-cell;
    width: 660px;
    vertical-align: bottom;
    margin:0 0 30px 0;
    background-color:#9C0;  
}

#container .hack-overflow{
    width:100%;
    height:auto;
    overflow:hidden;
    overflow-y:auto; 
    max-height:375px
}

#container .data{
    margin:0;
    width:660px;
    height:50px; 
    background-color:#F90; 
    border:#333 1px solid;
}

Upvotes: 0

Adam McElroy
Adam McElroy

Reputation: 458

I have used absolute positioning to try to fix your problem - fiddle here. Even when more lines of content are added, the height of the container will stay the same and a scrollbar will appear instead.

The CSS is simple:

#container {
    width: 660px;
    height: 375px;
    position: relative;
    background: #eee;
    overflow: hidden;
}

#container .content {
    width: 100%;
    max-height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: scroll;
}

The main container has a set height and hides any overflow. The content div inside is absolutely positioned to the bottom of this div and can never exceed the height of the main container. If it reaches 100% of the main container's height then a scrollbar will appear.

Try adding more content in and you'll see the scrollbar appear.

Upvotes: 1

SpliFF
SpliFF

Reputation: 38976

Your issue is that that the CSS spec is quite clear that overflow does not apply to table cells, browsers will ignore it. You may have better luck using inline-block for your aligned elements and set vertical-align:bottom on the parent. You might also be able to use a nested div in each TD but that's still tricky because 100% height doesn't work in children of table-cells either.

When you think about it, it actually makes sense. Table cells are supposed to scale to fit their children, not the other way around.

Upvotes: 1

Related Questions