css两端固定大小，中间自动大小

最新推荐文章于 2025-05-27 11:12:37 发布

weixin_34355881

最新推荐文章于 2025-05-27 11:12:37 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：https://segmentfault.com/a/1190000017186279

本文介绍了一种使用CSS calc属性实现两端固定高度，中间自适应高度的布局方法。通过具体代码示例，展示了如何在不同元素间分配空间，适用于网页设计中常见的三段式布局。

## calc实现 css两端固定大小，中间自动大小##

样式代码

<style type="text/css">
.wrap{
    height:300px;
    width:400px;
    background:#e0e0e0;
}
.top{
    height:50px;
    border:solid 1px #f0f0f0;
}
.midle{
    height:calc(100% - 100px)
}
.bottom{
    height:50px;
    border:solid 1px #f0f0f0;
}
</style>

ui界面代码

<div class="wrap">
    <div class="top">
        top wrap
    </div>
    <div class="midle">
        midle wrap
    </div>
    <div class="bottom">
        bottom wrap
    </div>
</div>