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

所以这是我的问题：

div＆＃34;页脚＆＃34;应该放在底部，即使内容不覆盖整个页面，如果内容更多，你也不应该看到＆＃34;页脚＆＃34;直到你滚动到它，即我不能使用position：absolute bottom：0px;
div＆＃34; main＆＃34;应该填补＆＃34;标题＆＃34;之间的空间。和＆＃34;页脚＆＃34; （以及＆＃34;主要＆＃34;（＆＃34;链接＆＃34;＆＃34;内容＆＃34;应该具有相同的高度，即100％）。我＆＃39;我在这里看到过类似的问题，但没有解决我的问题。
点击＆＃34;链接＆＃34;它增长到250px。这也揭示了更多内容（在这种情况下是一个图像）。但是，出于某种原因，＆＃34;链接＆＃34; 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;
    }
});

使用CSS定位DIV

1 个答案: