基于flex-flow:column, 实现"商城分类页"充满屏幕高度

BlackFlagBin 发布于2019-08-30 15:44 / 2961人阅读

摘要：起因早上看群里有人问如何让商城分类页在数据不多的情况下充满屏幕高度第一次回答相信大家的第一反应就是头高度我也是然后写了个第二次回答但是人家说头高度是撑起的没有具体高度好吧看来只能用了简单说下默认都是轴布局声明为后就变成轴布局这样就可

起因

早上看群里有人问如何让"商城分类页"在数据不多的情况下充满屏幕高度.

第一次回答(calc)

相信大家的第一反应就是calc(100vh - 头高度), 我也是, 然后写了个demo:

第二次回答(flex-flow:column)

但是人家说头高度是padding撑起的没有具体高度, 好吧看来只能用flex-flow:column了.
简单说下flex-flow:column, 默认flex都是x轴布局, 声明为column后就变成y轴布局, 这样就可以借助flex自动填充剩余的特性占满高度:


  我是标题

  
    
      侧边栏, 我是蓝色
    

    
      我背景是红色

main {
  display: flex;
  flex-flow: column;
  height:100vh;
  header {
    padding: 15px;
    background: #fff;
  }
  > article {
    flex:1;
    display: flex;

    aside {
      padding: 15px;
      background: #00f;
    }

    article {
      flex: 1;
      background: red;
    }
  }
}

点击预览

最后

没啥复杂的代码, 就是感觉比较常见, 可能对新手有帮助, 分享出来抛砖引玉, 因为我只是测试了微信浏览器, 其他的第三方浏览器没有尝试(比如uc), 如果路过的大神有兼容更好的代码还请不吝赐教.

因为就是写个demo, 所以也没有把老的flex语法加上, 现在都是脚手架开发, 编译的时候自动会给加上, 或者自己配置下相应的插件, 感谢阅读, 希望能帮助到你.

私有云 idc机房托管 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116289.html

前端经典布局：Sticky footer 布局

摘要：使用布局达到了预期的效果，及时内容区较少，页脚区块也是固定在底部。二布局方式代码这种方法就是利用布局对视窗高度进行分割。什么是Sticky footer布局？前端开发中大部分网站，都会把一个页面分为头部区块、内容区块、页脚区块，这也是比较。往往底部都要求能固定在屏幕的底部，而非随着文档流排布。要实现的样式可以概括如下：如果页面内容不够长的时候，页脚区块在屏幕的底部；如果内容足够长的时...

JerryWangSAP 2019-08-02 10:35 评论0 收藏0
重温&quot;什么是响应式网页设计？响应式布局的实现原理&quot;

摘要：概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年，移动互联网的数据流量将超越端的流量。概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是...

Nekron 2019-08-29 12:28 评论0 收藏0
重温&quot;什么是响应式网页设计？响应式布局的实现原理&quot;

摘要：概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年，移动互联网的数据流量将超越端的流量。概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是...

Joyven 2019-08-01 16:43 评论0 收藏0
css如何实现n宫格布局?

摘要：常见应用场景现在的界面基本都是大同小异宫格布局现在基本成了每个必然的存在带边框常用在功能导航页面无边框常用在首页分类设计目标在环境下通过实现宫格并且可以支持有无边框和每个格是否正方形有边框且每个格为正方形无边框最终效果百分比小技巧先解释一个常见应用场景现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在功能导航页面 showImg(htt...

sarva 2019-08-30 15:44 评论0 收藏0
利用Python appium实现模拟手机滑动操控的操作

　　小编写这篇文章的主要目的，是给大家进行一个相关的讲解，讲解的内容主要是利用Python appium实现模拟手机滑动的操作，具体的一些操作方法，下面给大家做出一个解答。　　其实在前面两个章节的元素定位的场景，我们已经对app中的自动化操作已经略知一二。这里我们发现，实际上appium复用了selenium的很多很多的操作方式，所以像一些点击、输入等操作，这种常规的操作的方式与在WEB自动化中的...

89542767 2022-10-14 10:44 评论0 收藏0