css双飞燕布局

双飞燕布局是一种常见的页面布局方式，它可以使页面左右两侧各自固定位置，而中间内容可以根据不同的设备宽度而自适应布局，达到更好的用户体验。

html,body {
    height: 100%;
}
.container {
    min-height: 100%;
    position: relative;
}
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #f0f0f0;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background-color: #f0f0f0;
}
.content {
    margin: 0 200px;
    height: 100%;
    background-color: #fff;
}
@media (max-width: 992px) {
    .left,.right {
        display: none;
    }
    .content {
        margin: 0;
    }
}

以上是双飞燕布局的CSS代码，其中的关键在于对容器的高度以及左右两侧的绝对定位，这样即使在内容很少的情况下也可以保证左右两侧的位置固定。而对于中间内容元素，则设置了一个左右边距，以便在不同宽度的设备中展现最佳效果。

在@media媒体查询中，我们设置了在992px以下的屏幕宽度下，左右两侧的元素隐藏，并将中间内容元素的边距设置为0，避免在小屏幕设备中出现不必要的空白。