CSS布局占满剩余空间

CSS占满剩余空间

最近在面试中被问到一道CSS的布局题。

面试官：如果在一个页面当中，上面和左边、右边被占据了固定位置，如何实现剩余空间的占满，说出你知道的所有解决方案。

我：flex布局，设置flex：1.

这个时候我就知道我完了~~其实我感觉想考的是grid网格布局。

下面让我们来解析一下这道题目吧！

解决方案一：Flexbox 布局

通过使用 Flexbox 布局，可以轻松地实现占据剩余空间的效果。

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
header {
    background-color: black;
    color: white; /* 改善文本可见性 */
    height: 60px;
}
.content-wrapper {
    display: flex;
    flex: 1; /* 占据剩余空间 */
}
aside {
    width: 200px;
    background-color: #f0f0f0;
}
main {
    flex: 1; /* 主内容区占据剩余宽度 */
    overflow: auto;
    background-color: rgb(34, 214, 151); 
}

<div class="container">
    <header>顶部导航栏</header>
    <div class="content-wrapper">
        <aside>左边注释区域</aside>
        <main>主要内容区</main>
        <aside>右边注释区域</aside>
    </div>
</div>

亮点：

• flex: 1 等价于 flex-grow: 1, flex-shrink: 1, 和 flex-basis: 0% 的组合，允许元素自动扩展以填满可用空间。
• 此方法简单且易于理解，适用于大多数场景。

解决方案二：使用 calc() 函数

另一种方法是使用 calc() 函数精确计算出剩余空间的大小。

.container { 
    display: flex;
    flex-direction: column;
    height: 100vh;
}
header {
    height: 60px;
    background-color: black;
    color: white; /* 改善文本可见性 */
}
.content-wrapper {
    display: flex;
    height: calc(100vh - 60px); /* 总高度减去header的高度 */
}
aside {
    width: 200px;
    background-color: pink;
}
main {
    width: calc(100% - 400px); /* 总宽度减去两侧aside的宽度 */
    background-color: green;
}

<div class="container">
    <header>顶部导航栏</header>
    <div class="content-wrapper">
        <aside>左边注释区域</aside>
        <main>主要内容区</main>
        <aside>右边注释区域</aside>
    </div>
</div>

注意点：

• 使用 calc() 计算时，确保运算符两边有空格（如 calc(100% - 400px)），否则会导致语法错误。
• 这种方法适合需要精确控制布局尺寸的情况。

解决方案三：Grid 布局

利用 CSS Grid 布局的强大功能，可以更灵活地控制布局。

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* 三列，第一列200px，第二列占据剩余空间，第三列200px */
    grid-template-rows: 60px 1fr; /* 两行，第一行60px，第二行占据剩余空间 */
    height: 100vh;
}
header {
    grid-column: span 3; /* 占据全部三列 */
    background-color: black;
    color: white; 
}
aside {
    background-color: pink; 
}
main {
    background-color: green; 
}
/* 明确指定aside和main的位置 */
.grid-container aside:first-child {
    grid-column: 1; /* 第一个aside位于第一列 */
}
.grid-container main {
    grid-column: 2; /* main位于第二列 */
}
.grid-container aside:last-child {
    grid-column: 3; /* 第二个aside位于第三列 */
}

<div class="grid-container">
    <header>顶部导航栏</header>
    <aside>左边注释区域</aside>
    <main>主要内容区</main>
    <aside>右边注释区域</aside>
</div>

关键点：

• 使用 grid-column: span 3; 来让 header 跨越所有三列。
• 明确指定 aside 和 main 的 grid-column 属性，确保它们正确地放置在各自的列中。
• Grid 布局非常适合复杂布局需求，提供了比 Flexbox 更强大的控制能力。

---

总结

上述三种方法各有优缺点，选择哪种取决于具体的需求和项目背景：

• Flexbox 是最简单直接的方法，适用于大多数简单的布局需求。
• calc()  提供了精确控制的能力，但可能不如其他两种方法灵活。
• Grid 布局则为复杂的布局需求提供了最大的灵活性和控制力。

根据实际需要选择合适的方法，可以帮助你高效地完成布局任务。希望这篇文章对你有所帮助！