首页 > 其他分享 >css布局-上下固定,中间铺满

css布局-上下固定,中间铺满

时间:2024-01-23 18:33:56浏览次数:30  
标签:flex 100% 100px 铺满 height background 上下 css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,html{
            height:100%;
        }
        .box{
            display: flex;
            flex-direction: column;/*垂直方向排列*/
            height: 100%;/*全屏*/
        }
        .top{           
            height: 100px;
            background: red;
        }
        .center{
            flex: 1;
            background: pink;
            overflow:auto;

        }
        .bottom{           
            height: 100px;
            background: green;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="top"></div>
    <div class="center">

        Content
没有更多啦
    </div>
    <div class="bottom"></div>
</div>
</body>
</html>


`

标签:flex,100%,100px,铺满,height,background,上下,css
From: https://www.cnblogs.com/tc310/p/17983124

相关文章

  • CSS_边框相关属性
    1、border: ;    2、表格独有属性    ......
  • 无涯教程-CSS - 尺寸(Dimension)
    无涯教程具有以下属性,可让您控制盒子的尺寸。height      :属性用于设置盒子的高度。width      :属性用于设置盒子的宽度。line-height  :属性用于设置一行文本的高度。max-height :属性用于设置盒子可以达到的最大高度。min-height ......
  • 前端打包后上传至服务器,发现css样式都未生效,查看请求preview预览格式不正确问题解决
    参考:https://blog.csdn.net/wzj_110/article/details/112850811 我的问题前端打包后上传至服务器,发现css样式都未生效,查看css请求,发现preview预览格式不正确,Response-Headers里的Content-type未对应 原因服务器的nginx配置中, mime.types文件缺失。 原理 MIME:Multip......
  • CSS_常用文本属性
    1、文本颜色 2、文本间距   3、文本修饰text-decoration  4、文本缩进text-indent  5、文本对齐_水平text-align  6、细说font-saize 7、行高line-height(不能小于字体大小,一般1.5)  8、行高的注意事项-数值一般为1.5 9、文本对齐_......
  • 无涯教程-CSS - 轮廓(Outlines)
    轮廓与边框非常相似,但是也没有什么主要区别-轮廓不占用空间。轮廓不必一定是矩形的。您可以使用CSS设置以下大纲属性。outline-width   : 属性用于设置轮廓的宽度。ouylinr-style    : 属性用于设置轮廓的线条样式。outline-color    : 属......
  • 无涯教程-CSS - 列表(List)
    本章教您如何使用CSS控制listtype,position,style等。无涯教程有以下五个CSS属性,可用于控制列表-list-style-type      : 设置列表项标志的类型。list-style-position  : 设置列表中列表项标志的位置。list-style-image    : 将图象设置为列表......
  • css 起步
    什么是CSSCSS(CascadingStyleSheets,层叠样式表)是为web内容添加样式的代码。和HTML类似,CSS也不是真正的编程语言,甚至不是标记语言。CSS是一门样式表语言,可以用它来选择性地为HTML元素添加样式。一般在HTML文件中头部(也就是head标签之间)引入CSS:<linkhref="styl......
  • 无涯教程-CSS - 边框(Border)
    border属性使您可以指定表示元素的边框。您可以更改边框的三个属性-border-color   : 指定边框的颜色。border-style    : 指定边框样式为solid,dashedline,double。border-width   :指定边框的宽度。现在,无涯教程将通过示例了解如何使用这些属性......
  • 无涯教程-CSS - 表格(Table)
    本教程将教您如何使用CSS设置HTMLTable的不同属性。border-collapse  : 设置是否把表格边框合并为单一的边框。border-spacing  : 设置分隔单元格边框的距离。caption-side     :  设置表格标题的位置。empty-cells      :  设置是......
  • 无涯教程-CSS - 链接(Links)
    当无涯教程讨论CSS的伪类时,将重新访问相同的属性。:link    : 表示普通的、未被访问的链接。:visited  : 表示用户已访问的链接。:hover   : 表示鼠标指针位于链接的上方。:active  : 表示链接被点击的时刻。记住a:hover必须在CSS定义中的a:......