在网页设计中,自适应布局已成为主流,CSS是实现自适应布局的重要工具之一。本文将介绍如何使用CSS实现一屏幕高度自适应。
html,body{ height:100%; margin:0; padding:0; } .wrapper{ height:100%; } .content{ min-height:100%; Box-sizing:border-Box; padding-bottom:50px;/*底部预留footer的高度*/ } .footer{ height:50px; }
首先,要实现一屏幕高度自适应,我们需要设置html和body元素的高度为100%,这样可以让页面充满整个屏幕。另外,我们去掉了这两个元素的margin和padding,以保证页面的完整性。
其次,我们需要用一个.wrapper来包含整个页面内容,设置其高度为100%。这样可以让页面内容充满整个屏幕。
然后,我们要设置.content的最小高度为100%,这样可以让内容超出屏幕时自动出现滚动条。另外,我们要使用Box-sizing来使padding不影响元素的实际高度。最后,我们给.content预留了一个高度为50px的.footer,以保证.content不会被.footer遮盖。