面试题之实现上下固定、中间自适应的布局---三种实现

最新推荐文章于 2024-05-14 03:11:33 发布

杨九日

最新推荐文章于 2024-05-14 03:11:33 发布

阅读量455

点赞数 2

分类专栏： css 文章标签：面试 css flex 定位 html

本文链接：https://blog.csdn.net/qq_42835377/article/details/106738239

版权

本文介绍了在面试中常见的布局问题——如何实现上下固定，中间内容自适应的布局。分别利用绝对定位+margin、flex布局和网格布局三种方式详细讲解了实现方法。通过设置display:grid并利用grid-template-columns和grid-template-rows属性，可以轻松创建灵活的三列布局。fr单位根据可用空间动态调整列宽。

摘要由CSDN通过智能技术生成

文章目录

和三栏布局不一样，float没有上下浮动，所以不能利用float进行布局；像是圣杯布局，双飞翼布局都是利用浮动+margin ，所以上下三栏布局方法就相应的少了一些。像是圣杯、双飞翼布局可参考一次搞定面试常问的三栏布局–五种实现

利用绝对定位+margin

		<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yang</title>
    <!-- 利用绝对定位+padding -->
    <style>
        {
   
            margin: 0;
            padding: 0;
        }
        body,html{
   
            width: 100%;
            height: 100%;
        }
        #container{
   
            position: relative;
            width: 100%;
            height: 100%;
        }
        .top{
   
            position: absolute;
            top: 0;
            width: 100%;
            height: 100px;
            background-color: aquamarine;
        }
        .bottom{
   
            position: absolute;
            bottom: 0;

最低0.47元/天解锁文章

杨九日

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
面试题之实现上下固定、中间自适应的布局---三种实现

文章目录利用绝对定位+margin利用flex和三栏布局不一样，float没有上下浮动，所以不能利用float进行布局；像是圣杯布局，双飞翼布局都是利用浮动+margin ，所以上下三栏布局方法就相应的少了一些。像是圣杯、双飞翼布局可参考一次搞定面试常问的三栏布局–五种实现利用绝对定位+margin <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me
复制链接

扫一扫

专栏目录