利用CSS函数calc(...)实现Web页面左右布局
前言
因为自己的网站需要，想要做一个左右布局的页面：
左边是导航菜单之类的东西、右边是文档内容（因为最近看的一些软件的文档页面都是这么布局的）；
左边固定宽度——300像素、右边使用剩余的宽度；
左边、右边的高度都是100%，浏览器的滚动条不能出现；
...
最终效果如下：div#layout包含左边的div#cool和右边的div#colr
过程
实现上面的页面过程中，遇到了两个难点：
1.设置div#coll的display为inline-block时，滚动条出现了；
-下面的代码出现滚动条
此时，div#coll、div#colr中没有内容。
<style>
html, body {
width:100%;
height: 100%;
padding:0;
margin:0;
}
div#layout {
background-color: cornflowerblue;
width:100%;
height:100%;
}
div#coll {
background-color: azure;
display: inline-block;
height:100%;
width:300px;
}
div#colr {
background-color: bisque;
display: inline-block;
height: 100%;
}
</style>
</head>
<body>
<div id='layout'>
<div id='coll'>
</div>
<div id='colr'>
</div>
</div>
-出现滚动条
-在写博文期间，只给div#coll中写一些内容——数字，问题更严重了！
-又给div#colr中写入一些内容，滚动条消失了，页面展示暂时符合期望！按照以往的经验，左右两边的内容有多行时，内容会相互影响。
看过参考链接，这样的问题和baseline什么的有关系，需要设置vertical-aign！不清楚！
2.div#colr如何使用剩余的宽度；
将难点1解决后，一直想让div#colr出现，可是，div#colr宽度又一直弄不好，直到发现了下面的参考链接，最终使用CSS函数calc()解决了问题！第一次见到CSS中可以使用函数~
两个难点分别通过下面的链接解决了：
1.设置inline-block元素的overflow：hidden意外增加元素总体高度的问题
文中推荐设置vertical-align: bottom，但孤设置为top也是可以的，更符合自己需要。
文中提供了多种方法，孤使用calc解决了问题，但没有使用float。
其中的display: flex的方法用过，看起来挺先进的。
最终代码：其中有陷阱，请见注意！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试布局</title>
<style>
html, body {
width:100%;
height: 100%;
padding:0;
margin:0;
}
div#layout {
background-color: cornflowerblue;
width:100%;
height:100%;
}
div#coll {
background-color: azure;
display: inline-block;
vertical-align: top;
height:100%;
width:300px;
}
div#colr {
background-color: bisque;
display: inline-block;
vertical-align: top;
height: 100%;
width:calc(100% - 300px);
}
</style>
</head>
<body>
<div id='layout'>
<div id='coll'><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul></div><div id='colr'>3</div>
</div>
</body>
</html>
注意，div#coll的结尾标记 和 div#colr的开始标记 之间是 没有任何内容的，包括空格！否则，页面布局就混乱了！对于这个的问题，怕是要靠其它方式来解决了，已大大超出孤的前端知识水平了。
后记
这样的布局在前面多年一直存在，而自己又没有深入研究过前端开发，仅仅知道写简单的CSS、JavaScript用法，但是，很不专业啊！
还好，今天把问题解决了，而且还知道是怎么解决的！
要是，赶紧记录下来！
不过，文中有不对的地方，还请前端开发高手多多指点！
对了，链接1中说的baseline什么的不是很清楚，还有链接2中的好多知识点，都不清楚啊！需要补充下相关知识！
还有，calc函数的资料哪里有？w3cschool教程中居然没找到！刚刚在菜鸟教程中找到了一个“CSS函数”页面：
利用CSS函数calc(...)实现Web页面左右布局的更多相关文章
- CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭
一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .f ...
- 关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
- css函数——calc()和attr()
css也有函数?好吧,我孤陋寡闻了.这里记录一下学习情况. calc()函数 定义:用于动态计算长度值 支持版本:css3 运算符前后都需要保留一个空格,例如:width: calc(100% - 1 ...
- CSS垂直翻转/水平翻转提高web页面资源重用性
/*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); ...
- 如何利用 CSS 动画原理，在页面上表现日蚀现象
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教 ...
- 前端每日实战：36# 视频演示如何利用 CSS 动画原理，在页面上表现日蚀现象
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教程 此视频 ...
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- 七个帮助你处理Web页面层布局的jQuery插件
1.UI.Layout jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可 ...
- web页面简单布局的修改,测试中的应用
在做功能测试的时候发现,界面显示不美观,觉得登录按钮应向上移动,那么如何移动呢? 很简单:使用开发者工具找到这个按钮所在的div,修改其中的属性值,top值减小,即可实现按钮向上移动,具体可以看效果
随机推荐
- Linux中的防火墙----iptables
防火墙,它是一种位于内部网络与外部网络之间的网络安全系统.一项信息安全的防护系统,依照特定的规则,允许或是限制传输的数据通过. 防火墙根据主要的功能可分为网络层防火墙.应用层防火墙.数据库防火墙. 网 ...
- Linux编程中 #define _XOPEN_SOURCE的作用
[误解]#define _XOPEN_SOURCE决不是简单的宏定义它是使程序符合系统环境的不可缺少的部分 [概念]Glibc 所实现全部或部分规范下的功能有:1.ISO C: C语言国际标准. 2. ...
- Golang构建HTTP服务（一）--- net/http库源码笔记
搭建一个简单的Go Web服务器 Go语言标准库 - net/http 在学习Go语言有一个很好的起点,Go语言官方文档很详细,今天我们学习的Go Web服务器的搭建就需要用到Go语言官方提供的标准库 ...
- xampp+vscode开发php的配置流程
一.所需文件 1.xampp集成服务器(个人使用7.1.7)https://www.apachefriends.org/download.html 2.vscode https://code.visu ...
- Spyder使用IPython Console弹出绘图窗口的设置方法
http://www.datastudy.cc/article/3cfc3aff3b2c5948b938456e00376276 在使用Spyder的过程中,因为它的绘图,默认是绘图在IPython窗 ...
- Cloudstack介绍（一）
云计算的出现 基本上,云计算只是一种把 IT 资源当作服务来提供的手段.几乎所有 IT 资源都可以作为云服务来提供:应用程序.计算能力.存储容量.联网.编程工具,以至于通信服务和协作工具. 云计算最早 ...
- gson转换对象为json字符串时对特殊字符编码的问题
使用google的gson进行object和json的转换,如下: public static String object2json(Object obj) { Gson gson = new Gso ...
- java 修饰符总结
java中的修饰符分为类修饰符,字段修饰符,方法修饰符.根据功能的不同,主要分为以下几种. 1.权限访问修饰符 public,protected,default,private,这四种级别 ...
- 组合数学及其应用——polya计数
在处理类似下面的问题中,一般的计数方法会出现问题:假如你要用红.蓝两种颜色给一个正四面体的四个顶点着色,试问存在多少种不同的着色方案? 在高中我们常用的方法是模拟涂色过程,分情况讨论,然后基于分步乘法 ...
- CSS3实战之多列
CSS2中如果要设计多列布局,常用的方法有浮动和定位,但是浮动容易错位,定位无法满足模块的自适应能力,以及模块之间的文档流联动的需要.为了解决多列布局的难题,CSS3新增了多列自动布局功能. 利用多列 ...