css3 垂直方向元素占据所有剩余空间

完成一个编辑文章的功能,顶部是标题,底部是按钮,中间是正文。这种布局让上下的元素各自对称贴近顶底,中间留白作为正文的编辑区最好看。

本来觉得这是个简单功能,结果 google 发现很多方案都是简单的将顶底元素上下定位,看起来显得占满了屏幕,而中间编辑区域的元素在文档流中实际的占位大小并未改变。

因为编辑功能用了比较酷炫的 medium 控件,用户焦点选中编辑区域控件才能激活,所以需要让编辑控件的高度也能随浏览器高度自适应变化。

又一番调查后发现了 css3 新支持的 flex 属性可以完美解决问题。用到的核心属性如下:

  • 父元素
    flex-flow: column;
    display:flex;

  • 编辑控件(子元素)
    flex: 1;

这个 flex 属性类似于 android 布局中 weight,指明当前元素在父元素内分割的空间比例。这里只有一个元素拥有该属性,所以占据了所有剩余控件。

父元素的属性主要意思也是说自己支持纵向 flex 布局,这倒是没什么复杂,只是其他相关的属性也要注意下才能完美。

min-height: 100%; /* 至少撑满屏幕,万一文章内容比较长也可自动延伸 */
margin-top: 0;
margin-bottom: 0; /* 页面开始已经100%,margin 会导致初始状态即超出屏幕 */
padding-top: 0;
padding-bottom: 0; /* 这两条根据盒模型取舍,我司该处是 standard mode,同 margin 理由设为0 */
overflow-y: scroll; /* 一单文章超出初始区域,如果不能滚动就悲剧了 */

不过由于这几个属性比较新,旧的浏览器可能没法支持。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,914评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,679评论 1 92
  • 2017年11月6日,如是家人(莲花遍智)吴宗泽,种种子第98天。 发心:我今不仅仅是为了我个人而闻思修,更是为了...
    吴宗泽阅读 1,599评论 0 3
  • (所有故事均为走廊骑士原创,没有得到作者许可,切勿转载。本故事纯属虚构,如有雷同,纯属巧合。) 弄死那个写鸡汤的!...
    走廊骑士阅读 8,998评论 88 83
  • 幸福就是生活中不必时时恐惧. 睡在屋里的人可以尽情酣睡,不必担心半夜强盗入室,一命呜呼。 走在路上的人,不必将背包...
    陌上花开carrie阅读 2,586评论 0 1