关于width=100%时会出现滚动条的情况
来源：互联网 发布：首席数据官 编辑：程序博客网 时间：2024/04/29 19:36
我们常常会看到一些网页永远都是充满屏幕的，不会出现水平方向的滚动条，那这些灵活的页面布局是怎样做到的呢？而有些出现水平方向的滚动条的页面又是因为什么原因呢？
例：
1.出现水平方向滚动条的页面及代码：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:100%;background:black;border:5px solid red;}
.box1{width:700px;height:200px;background:green;float:left;}
.box2{width:150px;height:500px;background:blue;float:right;}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下：
这是一个横向两列布局的页面，从图中我们可以看到当子元素box1和box2运用了浮动而其父元素box没有设置浮动时，子元素会把父元素给覆盖掉，这是因为什么呢？这是因为父元素没有设置浮动，而两个子元素的宽度加起来之后大于父元素，导致父元素的高度无法撑开，子元素内容溢出。ok，我们现在对父元素进行清除浮动看看（注意这时水平方向的滚动条已经出现）：
2.清除浮动之后的页面及代码：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:100%;background:black;border:5px solid red;overflow:hidden;}
.box1{width:700px;height:200px;background:green;float:left;}
.box2{width:150px;height:500px;background:blue;float:right;}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下：
我们看到清除浮动之后，父元素得以重现，但是这时水平方向上的滚动条仍然存在，注意我们再来看没有滚动条时是什么样的情况：
3.没有水平滚动条的页面及代码：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:90%;background:black;border:5px solid red;overflow:hidden;}
.box1{width:700px;height:200px;background:green;float:left;}
.box2{width:150px;height:500px;background:blue;float:right;}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下：
通过对比2和3我们可以发现，当父元素的宽度width=100%时，页面就会出现水平方向上的滚动条，这是为什么呢？要弄清楚这个问题，我们首先要知道这个width=100%的基准是谁，也就是说它是相对于谁而言的?它的参照物是谁？根据CSS的相关知识我们知道，当子元素没有设置样式时，子元素会继承其父元素的样式，而在本例当中，父元素box的父元素又是谁呢？答案是标签<html>，或者也可以理解为当前浏览器的可视窗口，所以它的宽度是整个浏览器窗口的宽度，而浏览器具有放大缩小的功能，所以它就会把子元素的宽度设置为当前可见区域的宽度，所以就会出现滚动条的情况，当滑动滚动条时，子元素的内容就会随着浏览器窗口的可视宽度进行显示，所以如果不想出现滚动条的情况，那么就需要在设置width值时，一定要设置一个不为100%的值。（如果需要用滚动条来显示溢出的话，那么可以把overflow设置为auto或者scroll）
- 关于width=100%时会出现滚动条的情况
- width=100%之后出现水平滚动条
- 页面出现滚动条时会出现抖动现象
- body{width:100%}但窗口出现滚动条&body的子元素height：100%实际高度未填满整个页面
- 关于宽度100% 出现横向滚动条的问题 以及注意您的显示器...
- 关于层的滚动条
- 关于滚动条的设置
- 关于滚动条的应用
- flex vbox 当设置height = 100% 时，滚动条不出现的问题
- extjs 3.4 在IE8下，tabPanel会同时出现纵向、横向滚动条的情况。影响用户体验。
- JScrollPanel中水平滚动条的出现
- 判断垂直滚动条的出现
- 关于css3+jq的不出现滚动条的下拉菜单
- UITableView 重用 UITableViewCell 并异步加载图片时会出现图片错乱的情况的原因
- 在linux上安装有些东西时会出现 Permission denied 的情况
- UITableView 重用 UITableViewCell 并异步加载图片时会出现图片错乱的情况
- winform中对于form设置backgroundimage时会出现窗口无法显示的情况
- 使用height:100%后出现滚动条
- 用户
- Android Studio中如何使用Git和Github来管理项目
- 【Unity优化】我所理解的IL指令
- Intellij Idea 快捷键设置大全
- PAT A 1021. Deepest Root (25)
- 关于width=100%时会出现滚动条的情况
- 如何使用package.json文件
- jdk8源码之Queue-ArrayQueue
- Spinner的使用和属性详解
- SSM框架——详细整合教程（Spring+SpringMVC+MyBatis）
- YUV与RGB的相互转换
- java List 排序 Collections.sort()
- Spring Hibernate4 连接几次后连接异常, Cannot get a connection, pool error Timeout waiting for idle object
- Android下解析XML
