【前言】
刚才写了一篇解决学生问题的博客，写完后感觉不错，以后的一些常见问题也来博客记录下
对此，想起一个常问的经典BUG问题：为什么width设为100%，窗口缩小留了空白，无法显示100%？
【问题描述】
宽度为100%的DIV的宽度随着浏览器窗口的大小而改变.给了背景颜色后,窗口缩小,这个DIV的宽度就是浏览器窗口的宽度.背景颜色也是这么宽.把下面的滚动条往右拉的话.这个DIV宽度不会变宽,右边就出现空白 BUG.怎么解决?
这里就不贴图片了，相信大家能够脑补出画面和原因。
【详解】
原因在于滚动条出现的那层元素宽度小于其内部元素的宽度，浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。
所以你要做的其实很简单，给body设置一个min-width就行了。数值是滚动条刚好不出现的那个宽度。
.
相关推荐
本文将详细解析`width:100%;`与`width:auto;`的区别，帮助开发者更好地理解和应用这两种不同的宽度设置。 首先，`width:100%;`的含义是，元素的宽度被设置为其父元素内容区域的宽度。这意味着，如果一个元素的父级...
在某些情况下，我们可能会遇到CSS设置元素`width: 100%`失效的问题，尤其是在该元素的父元素为`body`时。这是因为`body`元素的宽度可能受到浏览器滚动条、页面边距等因素的影响，导致子元素无法正确地占据100%的宽度...
在网页布局设计中，我们经常会遇到这样一个问题：当一个元素（如`div`）的宽度设置为`width: 100%`时，如果再添加`padding`或`margin`，元素的总尺寸会超出其父元素的宽度，导致布局混乱。为了解决这一问题，我们...
.header-inner,.banner-inner,.inner-box,.main-inner,.footer-inner,.banner-1-inner{ width:100%;} .header{ padding-bottom:12px;} .header-inner{ width:96%;} .header-left{ position:inherit; padding-bottom:...
在网页设计中，元素的宽度（width）和外边距（margin）是布局的重要属性，尤其是在处理表格（table）时，这两个属性的设置可能导致意料之外的溢出现象。这里我们将详细探讨`width:100%`和`margin`在表格中的应用以及...
width: auto 子元素（包括content+padding+border+...width: 100% 强制将子元素的content区域 撑满 父元素的content区域 子元素有margin、border、padding时，不改变子元素content区域的width，而是溢出父盒子，保
width: 100%; overflow: hidden; } .lock { z-index: 10; position: absolute; width: 100%; height: 100%; background: url(images/lock.jpg) no-repeat center; background-size: 100%; ...
代码如下: body { font-size:12px; } .menuBox { width:50%; height:auto; margin:0 auto; } .menuBox ul { margin:0px; padding:0px; } .menuBox ul li { float:left; display:block;... width:100%; height:
宽度很简单就是width:100% 但是高度呢，我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以。 以前我的做法是用js获取屏幕的高度，然后将其赋值给height， 屏幕高度在网页中为:window.innerHeight; ...
width: 100%; height: 450rpx; } .flex { display: flex; flex-direction: row; } .nav { flex-wrap: wrap; justify-content: center; padding-top: 20rpx; background: #fff; } .nav-item { margin: 30...
好久没有写博文了，正好今天一个任务需求的修改，遇到了一个小小的问题(或者你已经遇到了)，在这里分享...height:100%;background-color:#f00;} 结构 复制代码代码如下:”demo”> <div>position:absolute</div> </div>
.picul{ width:100%; float:left;} .picul li{ width:115px; height:115px; float:left; margin:0 7px 25px 7px; padding:1px; border:1px solid #ccc;} .picul li a{ display:block;} .picul li img{width:100%; ...
因为系统alert在苹果手机微信中，提示时，顶部会显示网站地址。 同时其他后续操作需要在js中继续填写。因此简单用div写了一个alert提示框，并自动关闭。 效果图 css样式 /*弹出消息对话框样式*/ .show_alert_box{...
是的！你没看错！... width:100%; height:420px; border:1px solid; position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none; position:absolute
这是一款类似于手机端的九宫格解锁特效，jQuery手机移动端地图连线手势解锁代码。 ...width: 100%; height: 100%; margin: 0 auto; overflow: hidden; } *{ padding: 0; margin: 0; }
1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。...width:100%;} 但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏
width: 100%; @media (min-width: 768px) { width: 80%; } } ``` 这段Sass代码会被编译成以下CSS： ```css .container { width: 100%; } @media (min-width: 768px) { .container { width: 80%; } } ``...