維護內容浮動權相同的兄弟姐妹的高度DIV浮動離開，響應

我有以下結構：維護內容浮動權相同的兄弟姐妹的高度DIV浮動離開，響應

<div class="wrapper1"> 
    <div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div> 
    <div class="right">some content here</div> 
</div> 
<div class="items"> 
    <ul><li></li></ul> 
</div>

上述佈局用於敏感部位。所以在調整窗口大小或在不同設備上加載頁面時，右側div的內容應始終保持與左側div的高度相同。

此外，我必須在右側div內容的最後一個字符結束處響應追加鏈接「more >>」。

我已經使用溢出隱藏的屬性爲正確的div，我想給一些高度基於窗口寬度使用媒體查詢正確的div。已經嘗試過不同的事情，但由於文本數量變化反應變得很難追加更多的鏈接到最後一個字符。

此外，我試圖使用jquery/jscript來檢測頁面加載左側div的高度，以便設置右側div的高度與使用.outerheight（）屬性相同，但是頁面的初始加載由於左側div內的圖像寬度設置爲100％，因此無法獲得以像素爲單位的高度。

而且，這裏有兩個主要問題，

1）我設置左格相同的高度爲右側格設置響應。在這裏，要顯示在正確的div中的額外內容應該始終隱藏起來。

2）在左div上的內容的最後一個可見行的最後一個字符是響應式地追加更多鏈接。

任何人都可以請建議一些解決方案。

來源

2016-05-01 Apurva T

歡迎堆棧溢出！尋求代碼幫助的問題必須包含在問題本身中重現**所需的最短代碼**最好在[** Stack Snippet **]中（https://blog.stackoverflow.com/2014/09/introducing-runnable） -javascript-CSS-和HTML的代碼段/）。請參閱[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

可能的重複：http://stackoverflow.com/questions/90178/make-a -div-fill-the-height-of-the-remaining-screen-space – marvinhagemeister

-1

我相信，當且僅當您使用引導CSS規則的網格系統，進而使具有特定高度的一類，並將其分配到div所有的問題將得到解決。而更多的建議得到熟悉CSS3
媒體查詢附加鏈接創建的相對位置股利，並使其在容器DIV

來源

2016-05-01 08:24:46

**這實在是一個評論，而不是一個答案。**我很欣賞你可能還沒有足夠的聲望留下評論，但請不要使用答案系統作爲替代。獲得聲譽相當容易，只需要您一點點努力。謝謝！ –

隨着Flexbox的底部的列會自動共享相同的高度，沒有任何JavaScript。

.wrapper { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    background: yellow; 
 
    flex: 1; 
 
} 
 

 
.right { 
 
    background: red; 
 
    flex: 1; 
 
}

<div class="wrapper"> 
 
    <div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div> 
 
    <div class="right">some content here</div> 
 
</div>

來源

2016-05-01 08:55:16 marvinhagemeister

維護內容浮動權相同的兄​​弟姐妹的高度DIV浮動離開，響應

回答

相關問題

維護內容浮動權相同的兄弟姐妹的高度DIV浮動離開，響應