我有一个关于一个div的问题,那么它的父div。div离开父母div
我的页面是寻找如下:
<div id="wrapper">
<div id="top">
</div><!--/top-->
<div id="middle">
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
New threads in here
</div>
<div id="active_thread">
Active threads in here
</div>
</div>
</div><!--/keep_up-->
</div><!--/middle-->
<div id="bottom">
</div><!--/bottom-->
</div>
而CSS(将跳过顶格,因为这是工作的罚款)。
html,body {
margin: 0;
padding:0;
height:100%;
}
#wrapper {
min-height:110%;/*Did this, so the page will be a little longer already*/
position:relative;
}
#middle{
width: 80%;
margin-left: 10%;
padding-bottom: 30px;
}
#bottom {
color: white;
background:#000;
width:100%;
height:20px;
position: absolute;
bottom:0;
left:0;
text-align: center;
font-weight: bold;
}
#thread_menu{
float: left;
width: 17%;
}
#new_thread{
height: 80%;
width: 100%;
border-left: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#active_thread{
height: 80%;
width: 100%;
margin-top: 5%;
border-left: 2px #000 solid;
border-bottom: 2px #000 solid;
border-right: 2px #000 solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
现在,我填的是积极和new_thread格与15个项目,我从我的数据库中检索。与Active_thread相同 div。但是,在大屏幕上,结果将显示正常(应该如此)。但是,一个小屏幕(笔记本电脑)上显示这样的:
(浏览器是没有那么大,你总是需要向下滚动一点才能看到页脚(见高度: 110%在包装))
问题:我如何让我的thread_menu推下脚并将其保留在我的包装或至少中间的div?
(使用标签JQuery和Javascript,因为我不知道如何解决这个问题,它可能需要其中的一个)。
图片编辑:
详细信息,请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/? –
Il试试,给我一点时间 – Mitch
'#thread_menu'被浮动。这意味着它被排除在正常流程之外。父母可能会崩溃。尝试将'overflow:auto'添加到'#keep_up',或者研究其他[*** clearfix methods ***](http://stackoverflow.com/search?q=clearfix)。 –