css calc and min-height can not team up properly

Question

i'm building a layout that has dynamic height (as most people do). i've been searching for a while but have not found similar case with mine. so here it is, my simplified code:

html:

<div id="body"><div id="content">
content
</div>
</div>
<div id="footer">
    abc
</div>

css:

#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #ddd;
}
#body{
    padding: 60px 50px 70px 50px;
    position: relative;
    min-height: calc(100% - 130px);
}
#content{
    font-family: verdana;
    margin-left: 200px;
    border-left: 5px solid #ddd;
    padding: 0 0 0 10px;
    min-height: 100%;
    min-width: 500px;
}
body{
    margin:0;
    overflow-y:scroll;
    height:100%;
    position:relative;
}
html{
    height:100%;
}

the problem is when i use that code, the content height is not calculated properly and the result look like this fiddle while what i'm trying to do is when the content is short, it should look like this and when the content is long, it should look like this.

if i change the min-height to height, when the content is short, i get what i wanted, but when the content is long, i get this annoying layout

it seems calc cannot read the height attribute when it is not specified (using min-height), but if the height is specified, then i can't get dynamic height, is there any other solution to achieve this?

PS: what i'm trying to do is to make the border of #content stretches according to its content with minimum height of a page height

note:

another strange fact is, actually my current code is working on latest chrome and IE, but have this problem on latest firefox and opera. i was trying to reproduce the problem using jsfiddle, and to my awe, all of the browsers have the same issue, i have included all the related html and css (copy the generated html and css) to jsfiddle only to find that my code is not working at all, i'm very confused

Answer 1

Why not use flex boxes? It sounds like you want a sticky footer - that is, the footer is at the bottom of the viewport when the content is not very high, but it is at the bottom of the content when the content exceeds the viewport height. This is very similar to the holy grail design. Here is an HTML5+CSS3 solution that does not use JavaScript:

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    height: 100%;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make the body a vertical flex container */
    /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    display: flex;
    flex-direction: column;
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100%; /* this helps with the sticky footer */
}
main {
    /* Allow the content to grow but not shrink */
    flex-grow: 1;
    flex-shrink 0;
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
}
footer {
    /* do not allow the footer to shrink */
    flex-shrink: 0;
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

If you don't want to copy the code into a fiddle yourself, I've done that for you. You may need to use some vendor prefixes if you want to support older browsers - flex boxes are relatively new as of the writing of this post.