Geek Answers Handbook

How to position a div at the bottom of a container without using absolute positioning?

I have a really complicated CSS problem. I have the following layout (this is just a quick layout in Paint):

http://i.imgur.com/SwxCYbJ.png

I need to swim in the red box at the bottom of the container. Normally I would use it position: absolute; bottom: 0;, but this causes the text to overlap with the div, which I don't want. I want the box to behave as in the second image (same situation, but with large text)

Is it possible? I don't mind dropping support for very old browsers.

+4
source share
2 answers

position: absolute. , .

#outer{
    position: relative;
    padding-bottom: 55px;
}

#foot{
    position: absolute;
    height: 55px;
    width: 100%;
    bottom: 0;
    left: 0;
}

: http://jsfiddle.net/cG5EH/2

: http://jsfiddle.net/cG5EH/1

+15

. calc css. 100%, , height: calc(100% + 80px). .

. http://css-tricks.com/a-couple-of-use-cases-for-calc/

<html>
<header>
    <style type="text/css">
        .container{
            height:100%;
            padding-bottom: 80px;
            box-sizing: border-box; //ensures the padding is part of the 100% height.
            position:relative;
            background-color: blue;
        }

        .base{
            position:absolute;
            top:calc(100% - 80px);/*80px arbitary height of the element*/
            height:80px;
            width:100%;
            background-color: yellow;
        }

    </style>
</header>
<body>
    <div class="container">
        <div class="base">
            sdfgsdfg
        </div>
    </div>
</body>

+1

More articles:


All Articles