css布局满屏高度自适应

CSS布局是网页设计中的核心，在不同的屏幕尺寸和设备上都需要有良好的表现。其中，满屏高度自适应是一个重要的布局方式，让网页更加美观和易于使用。

在CSS中，我们可以使用height:100vh来设置元素的高度。vh表示视窗高度，即网页显示区域的高度。使用这个属性，可以让元素的高度始终占据整个视窗高度。

    body,html {
        height: 100%;
        margin: 0;
    }

    .container {
        height: 100vh;
        width: 100%;
        background-color: #F7F7F7;
    }

上面的CSS代码展示了如何实现一个占据整个视窗高度的容器。首先，我们需要确保body和html元素都设置了height: 100%。这样可以让容器占据整个页面高度。

接下来，我们创建一个名为.container的类，并设置height: 100vh和width: 100%。这样就可以让容器占据整个视窗高度和宽度。同时，我们还可以设置背景颜色等样式。

需要注意的是，某些浏览器可能不支持vh和vw单位，因此需要使用兼容性处理。例如，我们可以使用JavaScript来检测浏览器是否支持这些单位，然后使用JavaScript来动态添加CSS规则。

    var vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh',vh + 'px');

    window.addEventListener('resize',function() {
        var vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty('--vh',vh + 'px');
    });

上面的JavaScript代码展示了如何设置CSS变量来兼容vh单位。首先，我们获取当前窗口高度，并将其除以100，得到每个单位的像素值。然后，我们将这个像素值设置为一个名为--vh的CSS变量。

接下来，我们注册了一个resize事件，当浏览器窗口大小发生变化时，重新计算--vh变量的值。这样，我们就能够在不同的屏幕尺寸上保持满屏高度自适应的效果。

总之，满屏高度自适应是一种非常实用的CSS布局方式，可以让网页更加美观和易于使用。在实际开发中，要注意浏览器兼容性和细节处理，从而实现最佳的用户体验。