Question

我有一个关于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（将跳过顶部div，因为它工作正常）。

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

现在，我用我从数据库中检索的15个项目填充活动和 new_thread div。与 Active_thread div相同。但是，在大屏幕上，结果将显示正常（应该如此）。但是在小屏幕（笔记本电脑）上它显示如下：

（浏览器不是那么大，你总是需要向下滚动才能看到页脚（见封装高度：110％））

问题：如何让我的thread_menu按下页脚并将其保存在我的包装器或至少中间div中？

（使用标签Jquery和Javascript，因为我不知道如何解决这个问题，它可能需要其中一个）。

图片编辑：

Answer 1

看起来#threadMenu向左浮动，这会将元素拉出文档流，因此不会影响包含div的高度！

您可以使用JS获取#threadMenu高度，然后将内容压缩这么多，但这不是理想的解决方案！

Answer 2

从#bottom

中删除以下样式

position: absolute;
bottom:0;
left:0;

为#keep_up添加一个clearfix（参见Michael_B提到的示例）

#keep_up:after {
  content:"";
  display:block;
  clear:both;
}

JSFiddle Link

注意：更改了id =＆＃34;中＆＃34;到id =＆＃34;中＆＃34;在你的小提琴例子中

Answer 3

我假设图像上的'menu-items'是CSS中的#thread_menu。当您在CSS中浮动某些内容时，您将其从流中取出。这意味着他们不会听父母的话。

你可以做的是使用display：flex;弯曲方向：行;在中间，使用flex强制#thead_menu使用17％的基数：0 0 17％。

有关如何使用flexbox的详细信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/

div离开父母div

3 个答案: