[分享]css分两栏布局等屏幕高

在网页设计中，使用CSS进行布局是非常重要的，CSS可以帮助我们实现不同的布局效果，其中两栏布局是比较常用的一种布局。首先，我们需要明确一点，就是如何让两列的高度等于屏幕的高度。一种方法是使用CSS3...

在网页设计中，使用CSS进行布局是非常重要的，CSS可以帮助我们实现不同的布局效果，其中两栏布局是比较常用的一种布局。

首先，我们需要明确一点，就是如何让两列的高度等于屏幕的高度。一种方法是使用CSS3的calc函数，如下所示：

 .left {
        width: calc(50% - 10px);
        height: 100vh;
        float: left;
        margin-right: 10px;
    }
    .right {
        width: calc(50% - 10px);
        height: 100vh;
        float: right;
        margin-left: 10px;
    } 

上述代码中，我们使用了calc函数，将宽度减去了10px的间隔，从而使两列的宽度加起来等于100%。同时，使用了100vh作为高度，使两列的高度等于屏幕的高度。

另外，我们还可以使用flex布局来实现两栏等高布局，如下所示：

 .wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    .left {
        width: 50%;
        height: 100%;
        margin-right: 10px;
    }
    .right {
        width: 50%;
        height: 100%;
        margin-left: 10px;
    } 

上述代码中，我们使用了display: flex，将父元素设置为弹性布局。同时，使用了flex-wrap: wrap，让子元素可以换行。接着，将两列的宽度都设置为50%，高度设置为100%。通过这样设置，就可以实现两栏等高布局。

总之，两栏等高布局在网页设计中是比较常见的一种布局效果，我们可以使用上述方法来实现。需要注意的是，在使用calc函数时，需要考虑不同浏览器的兼容性。