div离开父母div

-1

我有一个关于一个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，因为我不知道如何解决这个问题，它可能需要其中的一个）。

图片编辑：

来源

2016-09-15 Mitch

详细信息，请参阅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）。 –

貌似#threadMenu是向左浮动，这拉元件从文档的流动，所以不会影响广告所在的div的高度！

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

来源

2016-09-15 18:01:48 samisonline

从#bottom网页

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

删除以下样式添加clearfix为#keep_up（见Michael_B提到的例子）

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

JSFiddle Link

注：更改ID =“中东“to id =”middle“in your fiddle example

来源

2016-09-15 18:06:39

对我来说，这使得页脚上升，就像在绘制的例子中一样。 – Mitch

@Mitch更新了答案 - 替换为#keep_up。还包括jsfiddle示例。 –

I'假设图像上的'menu-items'是CSS中的#thread_menu。当你在CSS中浮动某些东西时，你会将其从流中移出。意思是说他们不会听父母说什么。

你可以做的是使用display：flex; flex-direction：row;在中间，通过使用flex：0 0 17％强制#thead_menu使用17％的基数。

关于如何您可以为提供`fiddle`使用Flexbox的

来源

2016-09-15 18:13:28 adamk22

div离开父母div

回答

相关问题