CSS实现三栏自适应布局（两边固定，中间自适应）

最新推荐文章于 2025-07-22 21:00:17 发布

原创

最新推荐文章于 2025-07-22 21:00:17 发布 · 1.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

绝对定位的元素会脱离文档流，它们是相对于包含块（通常是最近的具有相对定位、绝对定位或固定定位属性的父元素）进行定位的。当你把一个绝对定位的元素的高度设置为100%时，它会相对于其包含块的高度来确定自己的高度。如果包含块是整个屏幕，那么这个绝对定位的元素设置为100%高度就会占满整个屏幕。

相反，float属性用于让元素浮动在其父元素内部，但是它不会使父元素的高度被撑开，因此，一个使用float的元素设置高度为100%并不会让它占满整个屏幕，因为float的元素仍然存在于父元素的文档流中，而并不会脱离文档流。

因此，通过绝对定位的元素设置高度为100%，可以让这个元素占满整个屏幕，而使用float的元素设置高度为100%则不能实现同样的效果，因为float元素并没有脱离文档流。

方法一、绝对定位（absolute + margin)

给左右两边的元素设置absolute，这样左右两边的元素脱离标准文档流的控制，中间的元素自然会上来，然后给中间的元素设置margin留出左右两边元素的位置。左右两边的元素放在前面可以不计较位置，但中间的元素必须放在最后，否则中间元素的margin设置会把左右两边元素顶到下面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 这里样式的初始化也很重要，不然有空隙 */
        * {