缩小浏览器窗口后，右边出现空白（flex布局导致，需设min-width）

最新推荐文章于 2024-12-08 10:32:18 发布
最新推荐文章于 2024-12-08 10:32:18 发布
阅读量1.9k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE CSS样式 文章标签： 空白 滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/113877687
本文探讨了如何在使用flex布局时，确保页面在浏览器宽度小于1130px时避免出现空白，关键在于设置min-width:1130px。了解如何调整并保持响应式设计的灵活性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面中的安全宽度为1130px，若浏览器宽度小于1130会出现空白

在这里插入图片描述
因为使用了flex布局导致的，
需要设置一个最小宽度 min-width: 1130px;

浏览器/html/css面试题----1
MingL520的博客
05-24 503
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
css布局有空行怎么办,flex布局换行空白间隙之align-content的使用
weixin_39611308的博客
08-04 1886
一、本文实现的效果图如下：布局右侧使用flex布局，超过3个则换行。父元素代码如下：.nav-right{width: 75%;padding: 10px;display: flex;/* 默认是水平的 */flex-direction: row;/*设置子元素的排列方向*/flex-wrap: wrap;/*溢出则换行*/}子元素代码如下：.nav-right-item{width: 33.33...
css 解决在窗口缩小时，右边和下边留空白的问题
栖身星河之中
02-05 2417
1.html源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link text="text/css" rel="stylesheet" href="../css/index.css"> </head> <body> <div class=
浏览器窗口缩小后,滚动条拉至右边显示空白
Dreamy_LIN的博客
05-13 2896
问题描述: 当浏览器缩小后,出现滚动条,拉至右边,显示出来的部分为空白． 原因： 通过控制台的查看，可得知，浏览器窗口缩小后，子元素的宽度大于父元素的宽度，子元素将父元素撑开所致，如图： 解决方案： 在父元素上添加样式: style="width:expression(document.body.clientWidth <= 1200? '1200px': 'auto');min-width:1200px" 由于IE6不支持min、max,为了兼容,故使用width:expression(docu
flex布局设置flex后容器被内容撑开
qq_43610311的博客
10-29 5634
就和图片中的效果一样。容器大小是不确定的，要根据内容来决定。但是被内容撑开，使用word-wrap:break-word;强制换行文字和字母无效 这时将盒子的width设置为 0 ，然后使用 flex样式，将宽度交给 flex 布局来决定，容器就不会被撑开 width: 0; flex: 1 如果内容大小确定， flex-grow:0;//是否自动增长空间 flex-shrink:0;//是否自动缩小空间 ...
flex页面无法显示,页面显示空白
code3389的博客
12-08 1081
1.页面无法显示，在浏览器中打开页面,页面空白IE中显示为一个叉(类似于图片路径未找到那类) 今天这个奇怪的问题困扰了我很久。我在编写代码的时候打开页面无法显示(所有页面，即使是最简单的一个带按钮的页面),将FB卸载重装了问题仍然出现。再重装FLASH PALYER(装的时候，我重启了机器) 问题消失, 不久之后问题再次出现。 于是我关闭了浏览器，清空了历史记录，cookie症状不再发生了。之后...
CSS 浏览器缩小之后页面错乱 块不见问题
LlanyW的专栏
03-06 1045
第二层DIV加上溢出隐藏： overfolw:hidden;浏览器正常100%显示的时候：今日推荐是看得见的。浏览器缩小，小于100%之后，今日推荐被挤不见了。给最后层div 加上宽度，左右外边距自适应。缩小之后了能显示出来了。
html设置弹性盒子分配自适应比例,移动端弹性布局flex，CSS3自适应
weixin_42298164的博客
06-22 3661
1、Flex布局今天整理了一些关于Flex布局，参考了好多大神的杰做phpFlex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。css任何一个容器均可以指定为Flex布局。html.box{display: flex;}行内元素也可使用Flex布局。web.box{display: inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀...
屏幕适配布局之grid网格布局
炑焽的博客
04-20 1219
是W3C提出的一个二维布局系统。它与其他布局方式有所不同，因为它不仅可以指定容器内部多个项目的位置，还能创建更加复杂和灵活的页面布局。Grid布局可以将容器划分为“行”和“列”，形成单元格，并允许开发者指定项目所在的单元格。
vue 后台窗口缩小自动有横向滚动条
最新发布
03-11
嗯，用户想在Vue项目中解决窗口缩小后出现横向滚动条的问题。首先，我需要理解这个问题的原因。根据提供的引用，可能涉及到CSS布局、元素溢出或浏览器渲染的问题。 首先，引用[4]提到当窗口缩小时，内容层的固定...
第6章：布局 --[CSS零基础入门]
桃园码工的博客
12-08 1263
CSS 布局是网页设计中至关重要的一个方面，它决定了页面上元素的排列和展示方式。以下是几种常见的 CSS 布局方法和技术：
flex布局
空白的博客
06-21 351
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
Chrome浏览器最大化之后顶部有白/黑条解决方案
热门推荐
YYyyy
06-30 3万+
问题如题目描述，详见下图： 顶部是白条的图片： 顶部是黑条的图片： 非常不幸，两种情况我都遇到了。我有一个扩展屏幕，把他拖到扩展屏幕上去是完整的，只有在主屏最大化的时候才会有这个情况。于是根据这个条件想到了解决方案：修改主屏幕，然后再修改回来。这样问题就解决了。 bug发生原因还没来及的探索……就解决了。如果哪位遇到相同情况，可以溯其根源然后更加科学的解决此问题。...
解决网页右侧空白的方法
hoffy的博客
07-08 6936
第一次写这样的东西，可能有些地方表达不清楚，请见谅！ 可能是由于编写CSS样式变的时候没注意设置div层的宽度，所以要想解决空白，就需要麻烦地把每个可能出现错误的层的边框给显示出来，举个例子border：1px  #fff  solid;，这样就可以看出到底是哪个地方越了界，然后再修改参数即可。
flex布局笔记
qq_41111677的博客
12-07 237
display:flex 指定HTML元素盒子类型为弹性 flex-direction 子元素的排列方向row|column justify-content 子元素在主轴方向上的对齐方式center|space-between|space-around|flex-start|flex-end align-items 子元素在侧轴方向上的对齐方式 flex-wrap 是否换行 align-content 修改...
transform: scale(x, y) 等比缩放后，出现白边 / 滚动条 的解决方案
Lyrelion的博客
12-23 1万+
transform: scale(x, y) 等比缩放后，出现白边 / 滚动条 的解决方案
弹性盒子
前端历险记
06-01 308
弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 父容器设置：display: flex 子元素在父容器中的排列方向：flex-direction row ： 从左至右 row-reverse ： 从右至左 column： 从上到下 column-reverse： 从下到上 initial： 浮动 子元素在父容器换行：flex-wrap nowrap 不换行 wrap 换行 wrap-reverse 反向换行 子元素在父容器以主轴（横轴）的对齐方式：jus
弹性布局（flex）总结
Zyl_CN的博客
06-27 679
父元素身上的属性 1：flex-direction --控制子元素的排列方式 flex-direction: row | row-reverse | column | column-reverse; /* row(从左到右) --默认 row-reverse(从右到左) column(从上到下) column-reverse(从下到上) */ 2：flex-wrap --控制...
缩小浏览器窗口右边出现空白
qwe耿的博客
04-28 8681
布局做好的页面不会因为缩小浏览器窗口而右边出现空白？ [“发现现在缩小窗口，底部出现进度条，滑动至右边，就出现空白”]这个问题是个十分常见且容易忽略的bug。 原因是因为出现空白的元素设置了宽度100%，缩小窗口相当于减小了宽度值，那么为什么出现滚动条呢？ 是因为页面中至少有一个元素a的width大于窗口的width，导致把页面撑开，出现了滚动条，而此时那个width
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值