html - CSS:如何使用 CSS(无 JavaScript、动态宽度和高度、不更改 HTML)在#header 和#content 之间向上移动#thumbnails？

Question

如何使用 CSS(无 JavaScript)在 #header 和 #content 之间移动 #thumbnails，而不更改 HTML 并保持动态所有 div 标签的宽度和高度？
代码能够在 http://jsfiddle.net/laukstein/XdJxu/

HTML:

<div id=container>
    <div id=header>1. header</div>
    <div id=content>3. content</div>
    <div id=thumbnails>2. thumbnails</div>
</div>

CSS:

html,body,* html #container{height:100%;}
html,body{
    margin:0;
    padding:0;
    overflow:inherit;
}
#container{
    width:80%;
    min-height:100%;
    margin:0 auto;
    background-color:#ccc;
}
#content{
    background-color:#ececec;
}
#thumbnails{
    background-color:#ffdc71;
}

预期结果(跨浏览器、动态宽度和高度、无 JS、无 HTML 更改):

    1. header
    2. thumbnails
    3. content

Answer 1

Live Demo

相当脏，因为它不是动态高度，但它是一个概念证明，我所做的只是添加:

#content{
    margin-top:15px;
}
#thumbnails{
    margin-top:-35px;
}

Live Demo with JS - 现在没有 JQuery。感谢@AndyE 提供非 JQ 版本