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

回答

相關問題