移動端網頁開發時,如何實現元素高度自適應、自動撐開呢?以下是幾種實現方法:
/* 方法一:使用彈性布局 */ .container { display: flex; flex-direction: column; height: 100%; } .header { height: 50px; } .content { flex: 1; } .footer { height: 50px; } /* 方法二:使用絕對定位 */ .container { position: relative; height: 100%; } .header { position: absolute; top: 0; left: 0; right: 0; height: 50px; } .content { position: absolute; top: 50px; left: 0; right: 0; bottom: 50px; } .footer { position: absolute; bottom: 0; left: 0; right: 0; height: 50px; }
方法一使用彈性布局,優點是簡單易懂,代碼量小;缺點是對于需要支持低版本瀏覽器的開發者來說不夠友好。
方法二使用絕對定位,優點是兼容性較好,在低版本瀏覽器下也能正常工作;缺點是需要多嵌套幾個元素,代碼量略微大一些。
綜合來說,根據實際情況選擇相應的方法,可以更好的實現元素高度自適應、自動撐開。
上一篇docker上部署微服務
下一篇移動端css設置背景圖像