使用CSS定位DIV's

Question

我試圖解決這個問題的時間過長，因此現在是時候尋求幫助。

我有這個搗鼓這說明我想做的事：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; 
} 

的Jquery：

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; 
    } 
}); 

所以這是我的問題（S）：

1. DIV的「頁腳」應放置在底部，即使內容沒有覆蓋整個頁面，如果內容是更你不應該能夠看到「頁腳」，直到你滾動到它，即我不能使用位置：絕對底部：0px;
2. div「main」應該填充「header」和「footer」之間的空格（div中的「main」（「link」和「content」應該具有相同的高度，即100％）。在這裏看到類似的問題，但沒有任何解決我的問題。
3. 當點擊「鏈接」它增長到250px。這也顯示更多的內容（在這種情況下的圖像）。但由於某些原因，鏈接」的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; 
    } 
});