jquery - 使用 CSS 定位 DIV

Question

我已经尝试解决这个问题太久了，因此现在是寻求帮助的时候了。

我有这个 fiddle ，显示我想做什么:JSFiddle

这是我的 HTML:

    <div id="pagecontent">
    <div id="header">
    </div>
    <div id="main">
        <div id="content">
            <img src="http://www.blogcdn.com/www.engadget.com/media/2012/09/09-20-2012form-1-on-desk00-1348689824.jpg" width="100px">
        </div>
        <div id="link">
            <div class="linkbox">
                <img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Chart_-_Google_Docs.png" width="20px">
               <div class="linkcontent">
                   <img src="http://www.blogcdn.com/www.engadget.com/media/2012/09/09-20-2012form-1-on-desk00-1348689824.jpg" width="100%">
               </div>
               <div class="linkcontentzoom">
               </div>
            </div>
        </div>
    </div>
   <div id="footer">
   </div>
</div>

CSS:

html, body{
    padding: 0;
    margin: 0 auto;
    height: 100%;
}
@media (min-width: 1001px) {
  #pagecontent {
    margin-left:3%;
    margin-right:3%;
    margin-top:2%;
    margin-bottom:2%;
  }
  #header {
    width:100%;
    height:100px;
  }
  #footer {
    width:100%;
    height:100px;
  }
}
@media (max-width: 1000px) {
  #pagecontent {
    margin-left:2%;
    margin-right:2%;
    margin-top:2%;
    margin-bottom:2%;
  }
  #header {
    width:100%;
    height:100px;
  }
  #footer {
    width:100%;
    height:100px;
  }
}
@media (max-width: 800px) {
  #pagecontent {
    margin-left:15px;
    margin-right:15px;
    margin-top:10px;
    margin-bottom:10px;
  }
  #header {
    width:100%;
    height:50px;
  }
  #footer {
    width:100%;
    height:50px;
  }
}
@media (max-width: 500px) {
  #pagecontent {
    margin-left:0%;
    margin-right:0%;
    margin-top:0%;
    margin-bottom:0%;
  }
  #header {
    width:100%;
    height:30px;
  }
  #footer {
    width:100%;
    height:30px;
  }
}

#header {
    background-color:green;
}
#main {
    height:100px;
    min-height:100%;
}
#content {
    float: right;
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    background-color:grey;
    width: calc(100% - 30px);
    //width:100%;
    //min-height:100px;
}
#link {
    width: 30px;
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    background-color:black;
    color:white;
    position:relative;
    top:0;
    left:0;
    /* Set our transitions up. */
    -webkit-transition: width 0.8s;
    -moz-transition: width 0.8s;
    transition: width 0.8s;
}
.linkbox {
    width:100%;
    /* Set our transitions up. */
    -webkit-transition: width 0.8s;
    -moz-transition: width 0.8s;
    transition: width 0.8s;
    padding-left:5px;
    padding-top:5px;
    float:left;
}
.linkcontent {
    width:0%;
    overflow:hidden;
}
.linkcontentzoom {
    display:none;
}
#footer {
    background-color:green;
    clear:both;
}

J查询:

var linkstatus=false;
$('body').on('click', '#link', function() {
    if(!linkstatus) {
        $(this).css('width', '250px');
        $('.linkcontent').css('width', '100%');
        linkstatus=true;
    }
    else {
        $(this).css('width', '30px');
        $('.linkcontent').css('width', '0%');
        linkstatus=false;
    }
});

所以这是我的问题:

1. div“页脚”应该放在底部，即使内容没有覆盖整个页面，如果内容更多，你不应该看到“页脚”，直到你滚动到它，即我不能使用 position:absolute bottom:0px;
2. div“main”应该填充“header”和“footer”之间的空间(“main”中的 div(“link”和“content”应该具有相同的高度，即 100%)。我'我在 SO 上看到过类似的问题，但没有解决我的问题。
3. 当点击“链接”时，它会增长到 250 像素。这也揭示了更多内容(在本例中为图像)。但是，出于某种原因，“链接”div 中的所有内容都放在链接和页脚之间。

正如我所说，我已经被困在这里一段时间了，所以如果能帮助解决任何问题，我们将不胜感激!

Answer 1

我已经解决了我的问题，为了将来可能帮助其他人，我在这里发布我的答案!

我在 this 中找到了一些很好的技巧问题。

我的代码现在看起来像这样(从头开始)...

HTML

<div id="header"></div>

    <div id="link">
        <div class="linkbox">
            <img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Chart_-_Google_Docs.png" width="20px">

                <div class="linkcontent">
                    <img src="http://www.blogcdn.com/www.engadget.com/media/2012/09/09-20-2012form-1-on-desk00-1348689824.jpg" width="100%">
                </div>

               <div class="linkcontentzoom">
               </div>
        </div>

        <div class="linkbox">
            <img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Chart_-_Google_Docs.png" width="20px">

                <div class="linkcontent">
                    <img src="http://www.blogcdn.com/www.engadget.com/media/2012/09/09-20-2012form-1-on-desk00-1348689824.jpg" width="100%">
                </div>

               <div class="linkcontentzoom">
               </div>
        </div>
    </div>

    <div id="content">

    </div>

<div id="pushdiv"></div>
<div id="footer"></div>

CSS

html, body {
    height: 100%;
    margin:10;
}
#header {
    height:50px;
    background-color:green;
}
#content {
    background-color:blue;
    padding-left:50px;
    width: calc(100% - 50px);
    margin:0 auto -50px;
    min-height:calc(100% - 50px);
}
#link {
    width:50px;
    background-color:grey;
    float:left;
    margin:0 auto -50px;
    min-height:calc(100% - 50px);
    overflow:hidden;
    /* Set our transitions up. */
    -webkit-transition: width 0.8s;
    -moz-transition: width 0.8s;
    transition: width 0.8s;
    margin-bottom:-50px;
}
.linkbox{
    margin:5px;
}
.linkbox:last-of-type {
  margin-bottom:50px;
}
.linkcontent {
    /* Set our transitions up. */
    -webkit-transition: width 0.8s;
    -moz-transition: width 0.8s;
    transition: width 0.8s;
    display:none;
}
#pushdiv {
    clear:both;
}
#footer {
    height:50px;
    background-color:green;
    clear:both;
}

最后是 Jquery

var linkstatus=false;
$('body').on('click', '#link', function() {
    if(!linkstatus) {
        $(this).css('width', '250px');
        $('.linkcontent').css('width', '100%');
        $('.linkcontent').css('display', 'inline');
        linkstatus=true;
    }
    else {
        $(this).css('width', '50px');
        $('.linkcontent').css('width', '0px');
        $('.linkcontent').css('display', 'none');
        linkstatus=false;
    }
});