一,上固定,下自适应

1,代码

  1. <div class="all">
    <div class="top">111</div>
    <div class="center">222</div>
  2. </div>
  3. <style>
  4. .all {
  5. width: 100%;
  6. height: 100%;
  7. display: flex;
  8. flex-direction: column;
  9. }
  10. .top {
    width: 100%;
  11. height: 100px;
  12. background-color: #1ab394;
  13. }
  14. .center {
  15. width: 100%;
  16. flex: 1;
  17. background-color: #1c84c6;
  18. }
  19. </style>

2,图例

二,下固定,上自适应

1,代码

  1. <div class="all">
    <div class="top">111</div>
    <div class="center">222</div>
  2. </div>
  3. <style>
  4. .all {
  5. width: 100%;
  6. height: 100%;
  7. display: flex;
  8. flex-direction: column;
  9. }
  10. .top {
  11. width: 100%;
  12. flex: 1;
  13. background-color: #1c84c6;
  14. }
  15. .center {
  16. width: 100%;
  17. height: 100px;
  18. background-color: #1ab394;
  19. }
  20. </style>

2,图例

三,上下固定,中间自适应

1,代码

  1. <div class="all">
    <div class="top">111</div>
    <div class="center">222</div>
    <div class="bottom">333</div>
  2. </div>
  3. <style>
  4. .all {
  5. width: 100%;
  6. height: 100%;
  7. display: flex;
  8. flex-direction: column;
  9. }
  10. .top {
  11. width: 100%;
  12. height: 100px;
  13. background-color: #1ab394;
  14. }
  15. .center {
  16. width: 100%;
  17. flex: 1;
  18. background-color: #1c84c6;
  19. }
  20. .bottom{
  21. width: 100%;
  22. height: 100px;
  23. background-color: #13ce66;
  24. }
  25. </style>

2,图例

四,左固定,右自适应

1,代码

1.1,float布局

  1. <div class="all">
    <div class="left">111</div>
    <div class="right">222</div>
  2. </div>
  3. <style>
  4. .all {
  5. width: 100%;
  6. height: 100%;
  7. }
  8. .left {
  9. width: 320px;
  10. height: 100%;
    float: left;
  11. background: #409EFF;
  12. }
  13. .right {
  14. width: 100%;
  15. height: 100%;
  16. background: #008489;
  17. }
  18. </style>

1.2,flex布局

  1. <div class="all">
    <div class="left">111</div>
    <div class="right">222</div>
  2. </div>
  3. <style>
  4. .all {
  5. width: 100%;
  6. height: 100%;
    display: flex;
  7. }
  8. .left {
  9. width: 320px;
  10. height: 100%;
    flex:none;
  11. background: #409EFF;
  12. }
  13. .right {
  14. width: 100%;
  15. height: 100%;
  16. flex:1;
  17. background: #008489;
  18. }
  19. </style>

1.3,table布局

  1. <div class="all">
    <div class="left">111</div>
    <div class="right">222</div>
  2. </div>
  3. <style>
  4. .all {
  5. width: 100%;
  6. height: 100%;
  7. display: table;
  8. }
  9. .left {
  10. width: 320px;
  11. height: 100%;
  12. display:table-cell;
  13. background: #409EFF;
  14. }
  15. .right {
  16. height: 100%;
  17. display:table-cell;
  18. background: #008489;
  19. }
  20. </style>

1.4,calc布局

  1. <div class="all">
    <div class="left">111</div>
    <div class="right">222</div>
  2. </div>
  3. <style>
  4. .all {
  5. width: 100%;
  6. height: 100%;
  7. display: table;
  8. }
  9. .left {
  10. width: 320px;
  11. height: 100%;
  12. float:left;
  13. background: #409EFF;
  14. }
  15. .right {
  16. height: 100%;
  17. float:right;
  18. width:calc(100% - 320px);
  19. background: #008489;
  20. }
  21. </style>

1.5,margin-left布局

  1. <div class="all">
    <div class="left">111</div>
    <div class="right">222</div>
  2. </div>
  3. <style>
  4. .all {
  5. width: 100%;
  6. height: 100%;
  7. display: table;
  8. }
  9. .left {
  10. width: 320px;
  11. height: 100%;
  12. float:left;
  13. background: #409EFF;
  14. }
  15. .right {
  16. height: 100%;
  17. width:auto;
  18. margin-left:320px;
  19. background: #008489;
  20. }
  21. </style>

2,图例

五,综合

1,仿网站布局1

先左固定,右自适应;再上下固定,中自适应

  1. <div class="all">
  2. <div class="left">111</div>
  3. <div class="right">
  4. <div class="right-top">222</div>
  5. <div class="right-center">333</div>
  6. <div class="right-bottom">444</div>
  7. </div>
  8. </div>
  9. <style>
  10. .all {
  11. width: 100%;
  12. height: 100%;
  13. }
  14. .left {
  15. width: 320px;
  16. height: 100%;
  17. float: left;
  18. background: #409EFF;
  19. }
  20. .right {
  21. height: 100%;
  22. width: auto;
  23. margin-left: 320px;
  24. background: #008489;
  25. display: flex;
  26. flex-direction: column;
  27. }
  28. .right-top {
  29. width: 100%;
  30. height: 100px;
  31. background-color: #1ab394;
  32. }
  33. .right-center {
  34. width: 100%;
  35. flex: 1;
  36. background-color: #1c84c6;
  37. }
  38. .right-bottom {
  39. width: 100%;
  40. height: 100px;
  41. background-color: #13ce66;
  42. }
  43. </style>

2,仿网站布局2

先上固定,下自适应;再左固定,右自适应

  1. <div class="all">
  2. <div class="top">111</div>
  3. <div class="center">
  4. <div class="left">222</div>
  5. <div class="right">333</div>
  6. </div>
  7. <div class="bottom">444</div>
  8. </div>
  9. <style>
  10. .all {
  11. width: 100%;
  12. height: 100%;
  13. display: flex;
  14. flex-direction: column;
  15. }
  16. .top {
  17. width: 100%;
  18. height: 100px;
  19. background-color: #1ab394;
  20. }
  21. .center {
  22. width: 100%;
  23. flex: 1;
  24. background-color: #1c84c6;
  25. }
  26. .bottom {
  27. width: 100%;
  28. height: 100px;
  29. background-color: #13ce66;
  30. }
  31. .left {
  32. width: 320px;
  33. height: 100%;
  34. float: left;
  35. background: #409EFF;
  36. }
  37. .right {
  38. height: 100%;
  39. width: auto;
  40. margin-left: 320px;
  41. background: #008489;
  42. }
  43. </style>

如图所示

3,仿XShell页面布局

先上固定,下自适应;再左固定,右自适应;最后左上自适应,左下固定

  1. <div class="all">
  2. <div class="top">111</div>
  3. <div class="center">
  4. <div class="left">
  5. <div class="left-top">222</div>
  6. <div class="left-bottom">333</div>
  7. </div>
  8. <div class="right">444</div>
  9. </div>
  10. <div class="bottom">555</div>
  11. </div>
  12. <style>
  13. .all {
  14. width: 100%;
  15. height: 100%;
  16. display: flex;
  17. flex-direction: column;
  18. }
  19. .top {
  20. width: 100%;
  21. height: 100px;
  22. background-color: #1ab394;
  23. }
  24. .center {
  25. width: 100%;
  26. flex: 1;
  27. background-color: #1c84c6;
  28. }
  29. .bottom {
  30. width: 100%;
  31. height: 100px;
  32. background-color: #13ce66;
  33. }
  34. .left {
  35. width: 320px;
  36. height: 100%;
  37. float: left;
  38. background: #409EFF;
  39. display: flex;
  40. flex-direction: column;
  41. }
  42. .right {
  43. height: 100%;
  44. width: auto;
  45. margin-left: 320px;
  46. background: #008489;
  47. }
  48. .left-top {
  49. width: 100%;
  50. flex: 1;
  51. background-color: #1c84c6;
  52. }
  53. .left-bottom {
  54. width: 100%;
  55. height: 100px;
  56. background-color: #1ab394;
  57. }
  58. </style>

div上固定,下自适应;div左固定,右自适应的更多相关文章

  1. 用于阻止div上的事件和div上的按钮的事件同时触发

    event.stopPropagation()  阻止事件冒泡  用于ie11以上

  2. html同行两个div浮动后下一个div怎么换行的问题

    传送门:https://blog.csdn.net/asdfg6541/article/details/78514535

  3. DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  4. Django循环创造div后,对各个div操作后触发事件,传递数据(Django九)

    前面我用for循环创建了div,每个div中有各自的数据以及同样的布局 效果图如下:部分代码如下: 现在,我希望在点击每个div里的发表按钮时,能在js里获取{{problem.pro_id}}以及{ ...

  5. Jquery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果

    有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...

  6. 剑指Offer - 九度1523 - 从上往下打印二叉树

    剑指Offer - 九度1523 - 从上往下打印二叉树2013-12-01 00:35 题目描述: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 输入: 输入可能包含多个测试样例,输入以E ...

  7. 论气机之"左升右降"

      生命现象源于气机的出入升降运动. “出入废则神机化灭,升降息则气立孤危.故非出入,则无以生长壮老已:非升降,则无以生长化收藏”(<素问·六微旨大论>),升降是气机主要的运动形式之一,是 ...

  8. 上中下三个DIV,高度自适应(上高度固定,下固定,中间自适应)(代码来自X人)

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivDemo.aspx.c ...

  9. css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style

    css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...

  10. xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

随机推荐

  1. python 文件查找及截取字符串 (替换,分割) demo

    #"F:\\test.txt" ''' # 例1:字符串截取 str = '12345678' print str[0:1] # 例2:字符串替换 str = 'akakak' s ...

  2. nginx web服务器应用(虚拟主机 日志 rewrite location https)

    Nginx介绍 Nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件,因具有高并发(特别是静态资源),占用系统资源少等特性,且功能丰富而逐渐流行起来.功能应用上,Nginx不但是一个优 ...

  3. Android在init.rc中自定义开机启动进程(service)

    Android在init.rc中自定义开机启动进程(service) 原文链接:Android如何配置init.rc中的开机启动进程(service)(有删改) 前言 首先我先来解释一下本文到底讲什么 ...

  4. 3568F-Linux-RT系统测试手册

  5. NXP i.MX 6ULL工业核心板规格书( ARM Cortex-A7,主频792MHz)

    1 核心板简介 创龙科技SOM-TLIMX6U是一款基于NXP i.MX 6ULL的ARM Cortex-A7高性能低功耗处理器设计的低成本工业级核心板,主频792MHz,通过邮票孔连接方式引出Eth ...

  6. Mac 设置多个版本JDK

    控制台: p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1) } span.s1 { font-variant-ligatures: ...

  7. thinkphp5 关于跨域的一些坑

    1.首先在tp5的入口文件:public/index.php 在里面添加三行: // [ 应用入口文件 ] header("Access-Control-Allow-Origin:*&quo ...

  8. 从DDPM到DDIM

    从DDPM到DDIM (一) 现在网络上关于DDPM和DDIM的讲解有很多,但无论什么样的讲解,都不如自己推到一边来的痛快.笔者希望就这篇文章,从头到尾对扩散模型做一次完整的推导. DDPM是一个双向 ...

  9. 数据仓库建模工具之一——Hive学习第三天

    1.Hive的基本操作 1.1 Hive库操作 1.1.1 创建数据库 1)创建一个数据库,数据库在HDFS上的默认存储路径是/hive/warehouse/*.db. create database ...

  10. 吐血整理如何在Google Earth Engine上写循环 五个代码实例详细拆解

    在这里同步一篇本人的原创文章.原文发布于2023年发布在知乎专栏,转移过来时略有修改.全文共计3万余字,希望帮助到GEE小白快速进阶. 引言 这篇文章主要解答GEE中.map()和.iterate() ...