css選擇器爲路徑中的每個節點

我想獲得一個div來填充剩餘屏幕空間的高度，並在這裏找到了出色的答案：Make a div fill the height of the remaining screen space（所選答案）。css選擇器爲路徑中的每個節點

我與https://stackoverflow.com/users/1490904/pebbl的問題是，對於內容的柔性容器，因爲他提出這是height:100%並與height:100% html和body元素的直接子。在我的應用程序中，主體和我的柔性容器之間有一堆介入元素，如果我想讓我的柔性容器填充所有可用的垂直空間，則這些元素中的每一個還必須具有height:100%。

它的偉大工程，如果我只是有一個像

* { 
    height: 100%; 
    }

CSS規則，但是這是瘋了吧？我不知道將DOM中的每個元素都設置爲100％是否有問題，但如果不需要，我寧願不要。

我想（想這將選擇身體和我的柔性盒之間的每一個元素）：

body * .flex-box { 
    height: 100%; 
}

沒有運氣。

我的HTML（通過處理後的反應）看起來有點像：

<html> 
    <body> 
    <div> 
     <div class="another-div"> 
     <div class="another-div navbar-and-whatnot"> 
      <div class="yet-another-bunch-of-divs"> 
      <div class="flex-box"> 
       <div class="flex-remaining-height"> 
       <svg class="this-should-be-big" /> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

我的SCSS文件的相關部分（包括非工作試圖沿該路徑設置高度）：

html, body { 
    height: 100%; 
} 
body * .flex-box { // this part doesn't work. the rest comes from https://stackoverflow.com/a/24979148/1368860 
    height: 100%; 
} 
.flex-box { 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
    //.flex-row { border: 1px dotted grey; } 
    .flex-content-height { 
    flex: 0 1 auto; 
    /* The above is shorthand for: 
    flex-grow: 0, 
    flex-shrink: 1, 
    flex-basis: auto 
    */ 
    } 
    .flex-remaining-height { 
    flex: 1 1 auto; 
    } 
    .flex-fixed-height-40 { 
    flex: 0 1 40px; 
    } 
}

我想現在我可以找出body和我的彈性盒之間的路徑中的每個元素，併爲它們設置高度，但這非常脆弱。我將需要不斷修復它。

順便說一句，我正在使用react-bootstrap，所以如果有這樣一個更簡單的解決方案，我會接受它。

而且，對於更深層次的原因，我想這樣做的原因是我使用的庫創建了與其周圍div一樣大的SVG元素，並且我希望SVG儘可能大（並且適合屏幕上）。

P.P.S.我也有jquery加載。我想這將是最簡單的修復。不過，擁有一個css解決方案會很好。

來源

2017-02-21 Sigfried

向我們顯示您的代碼，無法在沒有它的情況下幫助您 –

做到了。謝謝。 – Sigfried

在CSS中沒有辦法選擇這種「路徑」。 用*選擇一切都是危險的，性能也不好。我建議你自己定義路徑。最簡單的方法可能是定義一個類，例如.full-height，並將該類指定給路徑中的所有元素。這樣，您只需將該類添加到添加到此路徑的任何新元素，並且CSS可以保持不變。

.full-height { 
    height: 100% 
}

來源

2017-02-21 12:50:11 skreborn

「用*選擇所有內容都很危險，性能也不好。」但那不是他在做的，所以沒關係。 – BoltClock

@BoltClock在原始問題中被稱爲極端可能性。我只是想強調，這*確實是一個非常糟糕的主意。 – skreborn

啊，我錯過了。 – BoltClock

恐怕你的運氣不好。編寫一個匹配給定元素的所有祖先的單個複雜選擇器是不可能的。

選擇器body * .flex-box匹配.flex-box其中包含至少一個祖先出現在它和body之間。這樣的選擇器意味着body > .flex-box不匹配。它不匹配.flex-box以外的其他任何內容（除非.flex-box本身包含另一個.flex-box，在這種情況下，兩者都將匹配，並且是噁心）。

來源

2017-02-21 12:50:21 BoltClock

css選擇器爲路徑中的每個節點

回答

相關問題