最好的方式來獲得與視口％，頭不使用VH

你好，我需要用80％的視口高度頭不使用的VH，因爲它只有80％的瀏覽器支持
最好的方式來獲得與視口％，頭不使用VH

我使用的這個，但我不確定它是否正確，否則會導致跨瀏覽器兼容性問題，因爲html和body的高度爲100％。

HTML

<body> 
    <header> 
    Header 
    </header> 
    <div> 
    Content 
    </div> 
</body>

CSS

html, body { 
    height: 100%; 
} 

header { 
    background-color:darkblue; 
    height: 80%; 
} 

div { 
    background-color:darkred; 
}

來源

2016-02-01 David Rivera

我做了[這個小提琴（https://jsfiddle.net/javasluud/ fqw7myup /），它顯示你的解決方案工作。但是，由於它有點冒險，它可能無法在所有瀏覽器中按預期工作。如果你擔心瀏覽器的兼容性，我建議使用'vh'單元和一個polyfill來實現它，或者用Javascript來做。 – LuudJacobs

或使用位置：絕對... https://jsfiddle.net/yaob3gc6/ – Anfuca

@Anfuca 你會怎麼做這個標記？ https://jsfiddle.net/by9mv8k7/ –

對於快速參考，看看是否有在各種瀏覽器的支持，去caniuse.com。從我的例子中可以看出，你想要使用的代碼非常好。

代碼來說明：

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
     height: 100%; 
    } 

    header { 
    height: 80%; 
    background-color: red; 
    } 

    div { 
    height: 20%; 
    background-color: green; 
    }

HTML

<header></header> 
<div></div>

來源

2016-02-01 12:16:44 pivemi

謝謝你的回答。但是我認爲有更好的辦法，因爲如果你檢查熱門網站沒有人給身體或HTML 100％身高。 –

最好的方式來獲得與視口％，頭不使用VH

回答

相關問題