CSS擴展了一組DIV中的一個元素

-1

我目前正在試圖讓一個元素（div）在父級元素的自由空間上伸展自己，同時尊重其級別上的其他元素的大小。我找到了一些解決方案並嘗試了其中的大部分解決方案，但我無法實現它。我懷疑這是因爲我正在使用的cms - 當告訴它使一組列的高度相同時 - 將父顯示樣式更改爲表格單元格。所以...這是我想要歸檔的圖像。CSS擴展了一組DIV中的一個元素

stretch

至於說，該CMS改變了藍色容器中顯示：表細胞伸展它在整個區域，並連續在同一高度的所有列。這個藍色容器的內部是我可以控制的元素。這些在父div（黃色）內最多有四個div（白色/綠色）。白色的div是動態的，並不總是存在的，綠色的無論是哪種白色元素都需要在整個垂直空間上展開。

和想法如何做到這一點？我嘗試了很多關於這個主題的答案，但他們沒有工作..我認爲這可能是由於藍色容器是一個表格單元的事實？

編輯：這是我到目前爲止。

<div id="box_wrap"> 
    <div class="box_title"> 
     Title 
    </div> 
    <div class="box_image"> 
     Image 
    </div> 
    <div class="box_content"> 
     Content 
    </div> 
    <div class="box_more"> 
     Read More 
    </div> 
</div>

所有這些是由CMS本身具有的attibute顯示提供了一種容器：表單元格。

#box_wrap { 
    display: flex; 
    flex-direction: column; 
    } 

.box_content { 
    display: flex; 
    flex: 2; 
}

我認爲問題可能是容器提供了我的CMS沒有定義的高度。如果我手動給予我的#box_wrap一個固定的高度，那麼其中的div就會像他們應該那樣工作。我也試過身高：自動和身高：100％的#box_wrap，它不起作用。同樣，可能是因爲父母沒有定義的高度，不是嗎？這是我需要解決的最後一件事。 #box_wrap需要在垂直方向上展開，目前它只能覆蓋內容。

我還注意到，我提供的第一個圖像不是100％準確的，所以我更新了它。

來源

2017-10-15 schlynch

到目前爲止你有什麼？請提供一些標記。 – Ingvi

歡迎使用堆棧溢出。請回顧[我如何問一個好問題]（https://stackoverflow.com/help/how-to-ask）。你已經嘗試過什麼了？問題應該顯示**研究證據和嘗試自己解決問題**，清楚地列出您的特定編碼相關問題以及[最小，完整和可驗證示例]中的任何相關代碼（https：// stackoverflow .com/help/mcve），所以我們有足夠的信息能夠提供幫助。 – FluffyKitten

好的，抱歉的帖子不夠。我會提供我到目前爲止所得到的。 – schlynch

我會用這個來讓.box_content增長（即變得更高），其他未：

.box_title, 
.box_image, 
.box_image { 
    flex-grow: 0; 
} 
.box_content { 
    flex-grow: 1; 
}

此外，你應該申請height: 100%到#box_wrap，但你還需要height: 100%上body並且html對#box_wrap的高度有參考。所以，總結一下：

html, body { 
    height: 100%; 
    margin: 0; 
} 
#box_wrap { 
    height: 100%; 
}

你也可能要添加...

body { 
    padding: 10px; 
    box-sizing: border-box; 
}

...讓屏幕的邊緣，你的容器之間的距離，因爲它在真實的顯示圖片。

來源

2017-10-15 22:09:52 Johannes

謝謝Johannes。我會嘗試一下，但是到目前爲止，box_content-Container的工作方式如預期。這是#box_wrap（黃色），不會超過其父母身高。 – schlynch

啊，我誤解了 - 我會更新我的答案 – Johannes

CSS擴展了一組DIV中的一個元素

回答

相關問題