前言

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

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

左边固定宽度——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. Codeforces 438D (今日gg模拟第二题) | 线段树 考察时间复杂度的计算 -_-|||

    Codeforces 438D The Child and Sequence 给出一个序列,进行如下三种操作: 区间求和 区间每个数模x 单点修改 如果没有第二个操作的话,就是一棵简单的线段树.那么如 ...

  2. ot

    https://blog.csdn.net/notice520/article/details/8135600 | android中的跨进程通信的实现(一)——远程调用过程和aidl - CSDN博客 ...

  3. typescript数据类型

    // 布尔类型 let isDone: boolean = false; // 数字类型 所有数字都是浮点数 number let decLiteral: number = 6; let hexLit ...

  4. Linux入门，这七大习惯得有！

    对于很多Linux初学者来说,在刚开始使用Linux系统时会感到很多不适.这里为大家整理了自己以前Linux入门时别人告诉我的七个习惯.我相信如果你运用了这七个习惯,在你使用Linux时你会感觉更安全 ...

  5. 前端如何使用easy-mock模拟接口

    1. 如何使用easy-mock // 获取 easy-mock 的模拟数据 getData () { // 开发环境使用 easy-mock 数据,正式环境使用 json 文件 if (proces ...

  6. oracle表结构和数据导出时的一些勾选项说明

    使用pl/sql developer导出oracle数据库的表结构和表数据时,有一些勾选项供用户选择,需要用户根据实际情况进行勾选或取消. 导出方法如下:一.只导出表结构1.使用pl/sql deve ...

  7. [HNOI 2013]切糕

    COGS 2398. [HNOI 2013]切糕 http://www.cogs.pro/cogs/problem/problem.php?pid=2398 ★★★☆   输入文件:nutcake.i ...

  8. springcloud入门系列(二)：注册中心Eureka

    搭建注册中心Eureka 1.pom中依赖 <dependencies> <dependency> <groupId>org.springframework.clo ...

  9. [译]Quartz.NET 框架 教程（中文版）2.2.x 之第四课 更多关于Triggers

    第四课 更多关于Triggers 跟作业任务类似,触发器也非常容易使用,但是在你能够充分掌握Quartz之前,你需要知道并理解许多触发器的客户化的参数.前面已经提到过,有许多不同类型的触发器供你选择, ...

  10. 用CSS3写圆角（超简单）

    前缀: -moz(例如 -moz-border-radius)用于Firefox-webkit(例如:-webkit-border-radius)用于Safari和Chrome. CSS3圆角(所有的 ...