您好,登錄后才能下訂單哦!
這篇文章主要介紹了css怎么讓高度自適應(yīng),具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
css讓高度自適應(yīng)的方法:1、給html元素設(shè)置“height:100%;display:table;”樣式,給body元素設(shè)置“display:table-cell;height:100%;”樣式即可。2、使用flex布局。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在寫css靜態(tài)頁面的時候讓Html的高度自適應(yīng)屏幕高度是一個常見的需求,比如你有一個需要置底的bottom按鈕,需要在內(nèi)容不足一屏的時候顯示在屏幕的底部,在內(nèi)容超過一屏的時候顯示在所有內(nèi)容的底部。
CSS的做法
方法1:
html { height: 100%; display: table; } body { display: table-cell; height: 100%; }
方法2:使用flex布局:
<div class="container"> <header></header> <content></content> <footer></footer> </div>
.container { display: flex; min-height: 100vh; flex-direction: column; } header { background: #cecece; min-height: 100px; } content { background: #bbbbbb; flex: 1; /* 1 代表盡可能最大,會自動填滿除了 header footer 以外的空間 */ } footer { background: #333333; min-height: 100px; }
JS的做法
css的做法有時候會在定位的時候造成一些麻煩,可以嘗試使用js去動態(tài)改變html的高度
基于zepto
$(document).ready(function(){ var windowHeight = $(window).height(); if($(this).height() < windowHeight){ $(this).height(windowHeight); } });
原生js
window.onload = function(){ var winHeight = 0; if (window.innerHeight){ winHeight = window.innerHeight; }else if ((document.body) && (document.body.clientHeight)){ winHeight = document.body.clientHeight; } var html = document.getElementsByTagName('html')[0]; if(document.body.offsetHeight < windowHeight){ html.style.height = windowHeight; } };
感謝你能夠認真閱讀完這篇文章,希望小編分享的“css怎么讓高度自適應(yīng)”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。