CSS中設置相對高度有兩種方式,一種是使用相對長度單位,另一種是使用百分比單位。
使用相對長度單位,最常見的有em和rem。em單位是相對于父元素字體大小的倍數,rem單位是相對于根元素字體大小的倍數。例如,將一個元素的高度設置為1.5em,則該元素的高度將是其父元素字體大小的1.5倍。而將一個元素的高度設置為1.5rem,則該元素的高度將是根元素字體大小的1.5倍。
/* 使用em單位設置相對高度 */ .parent{ font-size: 16px; } .child{ height: 1.5em; /* 相對于父元素字體大小的倍數 */ } /* 使用rem單位設置相對高度 */ html{ font-size: 16px; } .child{ height: 1.5rem; /* 相對于根元素字體大小的倍數 */ }
使用百分比單位,則是相對于父元素的高度或寬度。例如,將一個元素的高度設置為50%,則該元素的高度將是其父元素高度的50%。同時,百分比單位也可以結合使用其他相對長度單位,例如,將一個元素的高度設置為50%和1rem,則該元素高度將是其父元素高度的50%加上1rem的高度。
/* 使用百分比單位設置相對高度 */ .parent{ height: 200px; } .child{ height: 50%; /* 相對于父元素高度的百分比 */ } /* 結合其他相對長度單位設置相對高度 */ .parent{ height: 200px; font-size: 16px; } .child{ height: calc(50% + 1rem); /* 相對于父元素高度的百分比加上1rem */ }
總的來說,使用相對長度單位和百分比單位都能夠實現相對高度的設置,但需要根據具體需求選擇合適的單位。同時,相對單位的選擇還要考慮到頁面整體布局和響應式設計。
上一篇css 跟隨滾動條