前言

因为自己的网站需要，想要做一个左右布局的页面：

左边是导航菜单之类的东西、右边是文档内容（因为最近看的一些软件的文档页面都是这么布局的）；

左边固定宽度——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也是可以的，更符合自己需要。

2.左右布局：左边定宽、右边自适应

文中提供了多种方法，孤使用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页面左右布局的更多相关文章

  1. CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭

    一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .f ...

  2. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  3. css函数——calc()和attr()

    css也有函数?好吧,我孤陋寡闻了.这里记录一下学习情况. calc()函数 定义:用于动态计算长度值 支持版本:css3 运算符前后都需要保留一个空格,例如:width: calc(100% - 1 ...

  4. CSS垂直翻转/水平翻转提高web页面资源重用性

                    /*水平翻转*/ .flipx {     -moz-transform:scaleX(-1);     -webkit-transform:scaleX(-1);   ...

  5. 如何利用 CSS 动画原理，在页面上表现日蚀现象

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教 ...

  6. 前端每日实战：36# 视频演示如何利用 CSS 动画原理，在页面上表现日蚀现象

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教程 此视频 ...

  7. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  8. 七个帮助你处理Web页面层布局的jQuery插件

    1.UI.Layout  jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可 ...

  9. web页面简单布局的修改,测试中的应用

    在做功能测试的时候发现,界面显示不美观,觉得登录按钮应向上移动,那么如何移动呢? 很简单:使用开发者工具找到这个按钮所在的div,修改其中的属性值,top值减小,即可实现按钮向上移动,具体可以看效果

随机推荐

  1. Mybatis笔记三：MyBatis的API文档

    mybatis文档:http://www.mybatis.org/mybatis-3/zh/getting-started.html mybatis-spring文档:http://www.mybat ...

  2. Java的顺序栈和链式栈

    栈的定义 栈是限制在表的一段进行插入和删除的运算的线性表,通常能够将插入.删除的一端为栈顶,例外一端称为栈底,当表中没有任何元素的时候称为空栈. 通常删除(又称"退栈")叫做弹出p ...

  3. BZOJ1150：[APIO/CTSC2007]数据备份——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1150 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的 ...

  4. 【codeforces 528D】 Fuzzy Search

    http://codeforces.com/problemset/problem/528/D (题目链接) 题意 给定母串和模式串,字符集大小为${4}$,给定${k}$,模式串在某个位置匹配当且仅当 ...

  5. 【bzoj3832】Rally

    Portal -->bzoj3832 Description ​ 给你一个DAG,每条边长度都是\(1\),请找一个点满足删掉这个点之后剩余图中的最长路最短 Solution ​​ 这题的话感觉 ...

  6. web项目中日志管理工具的使用

    在web项目中,很多时候会用到日志管理工具,常见的日志管理用具有:JDK logging(配置文件:logging.properties) 和log4j(配置文件:log4j.properties) ...

  7. Java入门：修改IDE主题颜色

    1.去 http://eclipsecolorthemes.org/?view=theme&id=1下载你需要的颜色,根据id不同,配色方案不一样. 2.下载页面右侧的“Eclipse Pre ...

  8. 安装并使用 Wowza 发布你的 RTMP 直播流

    转载自:http://blog.csdn.net/defonds/article/details/11979095 I. 下载 Wowza         官方下载地址 http://www.wowz ...

  9. svn 节点处冲突 解决

    问题描述: [root@localhost ] $ svn up 正在升级 ‘.’: 已跳过 ‘bg0605’ – 节点处于冲突状态 版本 175. 冲突概要: 跳过的路径:1 解决方法: 当前目录下 ...

  10. [NOI1999] 棋盘分割

    COGS 100. [NOI1999] 棋盘分割 http://www.cogs.pro/cogs/problem/problem.php?pid=100 ★★   输入文件:division.in  ...