HTML中元素響應式高度設定

2021-10-17 23:50:00

我們知道百分比高度和寬度的計算都是基于父元素高度的。我們溯源到最頂的父元素——html，它的寬度是基于視口寬度的，但是它的高度卻是基于内容的，這也就是為什麼想通過百分比高度來使高度也響應式改變往往不可行的原因。

方法一：使用padding

主要原理是padding的計算是基于父元素寬度的，我們以保持空div的height=width為例，可以像這樣寫：

div {

width: 60%;
   height: 0%;
    padding-top: 60%;
    }

當然如果用這種方式，你還得必須考慮内容所占的高度，是以一般不推薦這樣寫。

方法二：使用js

隻要原理是在onresize事件中，通過clientWidth屬性擷取元素的可視寬度，并将其指派給元素的height。有以下幾種寫法：

在body中：

<body class=" container" οnresize="new function() {

var el=document.getElementById('div');
el.style.height=el.clientWidth+'px';

}">

注意： 1. clientWidth是沒有機關的，需要加上px；2. 雖然大多數标簽都有onresize事件，但是隻有寫在body的onresize中才有效。

使用window.onresize

window.onresize = function () {

        var el = document.getElementById('div');
        el.style.height = el.clientWidth + 'px';
    }

或者是jq的$(window).resize等等。

使用js最為靈活，推薦。

方法三：使用vh和vw

1vh就是視口高度的1%，1vw就是視口寬度的1%，使用這兩個機關可以讓元素寬高跟随視口大小變化，vh和vw是css3最有用的特性之一。最推薦使用這個方法。

方法四：使用定位

使用Fixed定位或Absolute定位。

繼續閱讀