[分享]css不定高两栏铺满全屏

在前端开发中，经常会遇到不定高两栏铺满全屏的需求。常见的解决方法有两种：使用浮动（float）和使用flexbox（弹性布局）。接下来，我们将讨论如何使用CSS来实现这两种方法。使用浮动（float）...

在前端开发中，经常会遇到不定高两栏铺满全屏的需求。常见的解决方法有两种：使用浮动（float）和使用flexbox（弹性布局）。接下来，我们将讨论如何使用CSS来实现这两种方法。

使用浮动（float）

 .container {
        overflow: hidden;
    }
    .main {
        float: left;
        width: calc(100% - 200px); // 假设侧边栏的宽度为200px
        background-color: #eee;
    }
    .sidebar {
        float: right;
        width: 200px;
        background-color: #ccc;
    } 

这种方法非常简单，只需要将主要内容（.main）和侧边栏（.sidebar）都浮动即可。但是需要注意的是，由于浮动元素脱离了正常的文档流，所以要给外层容器（.container）设置 overflow: hidden;，以清除内部浮动对外部布局的影响。

使用flexbox（弹性布局）

 .container {
        display: flex;
    }
    .main {
        flex: 1; // 相当于设置 flex-grow: 1;
        background-color: #eee;
    }
    .sidebar {
        width: 200px;
        background-color: #ccc;
    } 

flexbox 是 CSS3 提供的一种弹性布局模式，因为它具有灵活性和自适应性，所以在处理不定高两栏铺满全屏的布局时非常有用。使用 flexbox 需要先将外层容器（.container）设置为 display: flex;，然后将主要内容（.main）的 flex-grow 属性设置为 1，表示它可以在剩余空间中按比例分配充足的空间，而侧边栏（.sidebar）的宽度被设置为固定值。

总的来说，使用浮动和flexbox都是非常常见的解决不定高两栏铺满全屏布局的方法，而且都有各自的优缺点，需要结合具体情况进行选择。