css元素高度減去高度變化的元素的高度

aye夥計！css元素高度減去高度變化的元素的高度

是否有可能與CSS3動態高度計算？我找不到任何東西..但也許我只是用我的搜索錯誤的條款。

的問題：我有一個網站，我想包括用100％的高度的iframe減去一個導航元素的高度。不幸的是，NAV-元件並不總是具有相同的高度（關於另一個設備36px 44px ..等等）

有沒有辦法來計算？或者我是否需要修復nav-element的高度以使其正常工作？

來源

2016-12-14 Andreas Grafen

如果你要計算的高度，那麼你應該使用jQuery這一點。否則，您需要爲該導航元素保留一個固定的高度。 – Taniya

好的，謝謝！因爲我是新來的所有這些..你也許有我能做到這一點的例子嗎？否則......我想需要找出某種方式。 –

這是測量單位vh和vw的發明，看看那些。 – Kyle

您可以在兩個元素的包裝使用display: flex屬性。

html, body, #wrapper { 
    height: 100%; 
} 

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

#frame-fill { 
    flex-grow: 1; 
} 

<div id="wrapper"> 
    <div>HEADER DYNAMIC</div> 
    <iframe id="frame-fill" src=''></iframe> 
</div>

確保您查看瀏覽器對flex的支持。它是一個更新的概念。

來源

2016-12-14 13:16:09

當然！我假設導航元素的高度取決於屏幕大小，您可以爲媒體查詢賦予不同的高度。所以，你只需要確定在哪個元件高度變化的大小或寬度：

/*put your conditions here*/ 
    @media (min-height: 500px), (min-width: 580px) { 
     iframe{ 
      height: calc(100% - 44px); 
     } 
    } 
    /*put your conditions here*/ 
    @media (max-height: 1000px), (min-width: 580px) { 
     iframe{ 
      height: calc(100% - 36px); 
     } 
    }

來源

2016-12-14 13:05:54 Flink

有趣的是它無關，與屏幕尺寸壽。在我家的1920x1080屏幕上，導航的高度是44px，我的顯示器和操作系統相同，但導航高度只有36px。顯然內容是一樣的。一個16pt的圖標字體和頂部和底部10px的填充。其實，我不知道爲什麼有一個高度差.. –

好，有喜歡的，你可以嘗試一下分辨率等條件，但如果你真的想不出是什麼原因導致的資產淨值的大小，你將不得不去與jQuery或的JavaScript。 – Flink

是。我目前正試圖讓這個工作。但感謝您的幫助，如果我想查看移動設備上的網頁，可能會派上用場。（： –

css元素高度減去高度變化的元素的高度

回答

相關問題