CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。

做为码农,工作职责就是把功能实现了,在此,我简单说一下页面布局吧。先贴上设计稿吧:

UI图主要是为PC设计的,手机上可能看不太清,但这不影响接下来讲解的布局,我们先简单分析一下页面,看看如何实现这个复杂的页面布局。

我写的HTML结构代码:

<div class="wrapper">
    <!-- left -->
    <div class="kf-left-panel"></div>
    
    <!-- main left -->
    <div class="kf-contact-panel"></div>
    
    <!-- main-right -->
    <div class="kf-content-panel"></div>
    
    <!-- right -->
    <div class="kf-right-panel"></div>
</div>

1、此页面宽高均占满全屏

这种占满全屏的布局,比较常见的是早期的一些论坛,width都设置为100%,现在也有不少论坛设置成了定宽~

当前这种页面元素比较多的布局,建议加上最小宽度 & 最小高度,再加上宽度高度都是100%(要设置html,body高度为100%)。

<style>
html, body{
    height: 100%;
}
.wrapper{
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 600px;
}
</style>

2、布局大致分为左中右结构(中间再分为左右布局)

左右布局是CSS布局中比较常见的一种布局方式,这里的难点是,既要实现左右布局,又要保证width: 100%;(就是宽度不定,因为用户的浏览器宽度是各不相同的)。 好了,直接上代码吧(实现方式应该不止这一种):

<style>
.wrapper{
  min-width: 1000px;
  height: 100%;
  min-height: 600px;
}
// left:用左浮动 and 定宽

.kf-left-panel{
  position: relative;
  float: left; 
  width: 104px;
  background: $bg_black;
  height: 100%;
  overflow: auto;
  text-align: center;
}
// main left:用左浮动 and 定宽

.kf-contact-panel{
  position: relative;
  float: left;
  width: 260px;
  height: 100%;
  border-right: 1px solid $border;
  overflow: hidden;
}
// main right: 设置margin-left和margin-right值,给left-panel和right-panel留出空间

.kf-content-panel{
  position: relative;
  margin-left: 364px;
  margin-right: 260px;
  height: 100%;
  overflow: hidden;
}

// right:这个很好理解了,绝对定位,宽度正好是上面content留下的margin-right值

.kf-right-panel{
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 100%;
  border-right: 1px solid $border;
  background: $bg_user_info;
  overflow: auto;
}
</style>

这个左右布局问题也解决了,剩下的上中下布局也就好办了~

3、中间两个区域均可分上中下结构

上中下布局属于多行布局,也是比较常见的布局方式,就当前设计稿来说,难点儿是高度100%的情况下(高度根据用户浏览器高度而定)来实现这效果。 就拿中间的对话区域来分析:顶部高度定高,底部输入区域也是定高,中间区域高度是剩余的高度。

好了,还是直接上代码吧:

html部分

<!-- 顶部标题区 -->

<div class="dialog-title dialog-content-title"></div>

<!-- 对话内容区 -->
<div class="dialog-content-news"></div>

<!-- 底部输入框区域 -->
<div class="dialog-input-panel"></div>

css部分

<style>
// 顶部标题区

.dialog-title{
  height: 48px;
  line-height: 48px;
  padding-left: 16px;
  font-size: $font_title;
  color: $color_default;
  overflow: hidden;
}

// 对话内容区

.dialog-content-news{
  position: absolute;
  top: 48px;
  left: 0;
  bottom: 161px;
  width: 100%;
  border-top: 1px solid $border;
  overflow: hidden;
}
// 底部输入框区域
.dialog-input-panel{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 160px;
  border-top: 1px solid $border;
}
</style>

OK,看来解决好上面这三个问题,这个复杂的布局就搞定了。纯CSS实现,没有用一行JS代码,不说了,要继续写代码了~

想查看DEMO,请点击:http://demos.pxuexiao.com/kefu/index.html

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-07-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第132天:移动web端-rem布局(进阶)

      该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注...

653
来自专栏BestSDK

9种最经典的导航模式,APP开发必备

一、标签式导航 标签式导航又称为tab式导航,现在大多数app采取的主流形式,一般分为底部导航、顶部导航、底部和顶部双tab导航 1、底部标签导航 底部导航一般...

3779
来自专栏Coding01

推荐简约漂亮的小程序日历插件

好比 PHP 的 composer、前端的 npm,Java 的 jar包,小程序插件的出现,极大的方便了我们共享组件,减小开发量。

1252
来自专栏Android小菜鸡

自定义View学习之路(四)————图片介绍框

  走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的图片相框为例。开始系统的学习View的绘制。   麻雀虽小却五脏俱全,...

631
来自专栏互联网杂技

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

3665
来自专栏数据小魔方

Xcelsius(水晶易表)系列16——自定义地图图表

今天继续跟大家分享水晶易表系列关于地图呈现的技巧——自定义数据地图。 该案例主要通过图标模拟与之前学过的动态可见性,根据数据需求,订制动态交互式地图图表。 案...

3236
来自专栏HTML5学堂

【系列】移动端项目经验 表单兼容(上篇)

移动端 表单兼容(上篇) HTML5学堂:从这篇文章开始,我们将为大家总结介绍移动端的常见兼容问题,今天要提的是关于表单的一些兼容问题,本文主要包括input文...

2748
来自专栏好好学习吧

在博文顶部添加文章字数及阅读时间信息:阅读本文需要xx分钟

806
来自专栏HTML5学堂

如何让旧浏览器支持HTML5新标签

HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,...

2647
来自专栏Android干货

Android项目实战(四十):在线生成按钮Shape的网站

28310

扫码关注云+社区