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

最新推荐文章于 2024-12-08 10:32:18 发布
原创 最新推荐文章于 2024-12-08 10:32:18 发布 · 1.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#空白 #滚动条

本文探讨了如何在使用flex布局时，确保页面在浏览器宽度小于1130px时避免出现空白，关键在于设置min-width:1130px。了解如何调整并保持响应式设计的灵活性。
页面中的安全宽度为1130px，若浏览器宽度小于1130会出现空白

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

浏览器/html/css面试题----1
MingL520的博客
05-24 593
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
css 解决在窗口缩小时，右边和下边留空白的问题
栖身星河之中
02-05 2451
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 2983
问题描述: 当浏览器缩小后,出现滚动条,拉至右边,显示出来的部分为空白． 原因： 通过控制台的查看，可得知，浏览器窗口缩小后，子元素的宽度大于父元素的宽度，子元素将父元素撑开所致，如图： 解决方案： 在父元素上添加样式: style="width:expression(document.body.clientWidth <= 1200? '1200px': 'auto');min-width:1200px" 由于IE6不支持min、max,为了兼容,故使用width:expression(docu
解决网页右侧空白的方法
hoffy的博客
07-08 6988
第一次写这样的东西，可能有些地方表达不清楚，请见谅！ 可能是由于编写CSS样式变的时候没注意设置div层的宽度，所以要想解决空白，就需要麻烦地把每个可能出现错误的层的边框给显示出来，举个例子border：1px  #fff  solid;，这样就可以看出到底是哪个地方越了界，然后再修改参数即可。
html底部右侧有空白,制作的网页在浏览时下方有多余的空白如何消除
weixin_35648264的博客
05-30 953
在使用dreamweaver或者frontpage来制作HTML网页时，我们有可能会遇到这样的问题：在软件中好好的网页一旦放到浏览器中，就会在网页的下方莫名其妙的多出来或多或少的空白。那么这种空白又要怎么去消除呢？起先我以为只要在网页的代码中加一个CSS来约束一下网页的高度就行了，事实证明这样是行不通的。原因：首先我们要知道，用软件来写网页的话，大多数都是通过图形化的界面来“堆”网页，这样堆网页的...
解决HTML页面右侧空白问题
S_aitama的博客
03-19 1万+
html右侧空白解决办法
上面代码，当浏览器点击放大窗口时，会周边有空白，我想点击浏览器的放大和缩小就不要走上面方法了
最新发布
04-29
好的，我现在需要帮助用户解决在使用vw和vh布局时，浏览器缩放导致页面出现空白的问题，同时避免触发原有的缩放处理逻辑。首先，我得回顾用户之前的提问和我的回答，确保这次回答能延续之前的解决方案，同时结合用户...
屏幕适配布局之grid网格布局
炑焽的博客
04-20 1313
是W3C提出的一个二维布局系统。它与其他布局方式有所不同，因为它不仅可以指定容器内部多个项目的位置，还能创建更加复杂和灵活的页面布局。Grid布局可以将容器划分为“行”和“列”，形成单元格，并允许开发者指定项目所在的单元格。
vue 后台窗口缩小自动有横向滚动条
03-11
嗯，用户想在Vue项目中解决窗口缩小后出现横向滚动条的问题。首先，我需要理解这个问题的原因。根据提供的引用，可能涉及到CSS布局、元素溢出或浏览器渲染的问题。 首先，引用[4]提到当窗口缩小时，内容层的固定...
第6章：布局 --[CSS零基础入门]
桃园码工的博客
12-08 1335
CSS 布局是网页设计中至关重要的一个方面，它决定了页面上元素的排列和展示方式。以下是几种常见的 CSS 布局方法和技术：
flex布局设置flex后容器被内容撑开
qq_43610311的博客
10-29 5727
就和图片中的效果一样。容器大小是不确定的，要根据内容来决定。但是被内容撑开，使用word-wrap:break-word;强制换行文字和字母无效 这时将盒子的width设置为 0 ，然后使用 flex样式，将宽度交给 flex 布局来决定，容器就不会被撑开 width: 0; flex: 1 如果内容大小确定， flex-grow:0;//是否自动增长空间 flex-shrink:0;//是否自动缩小空间 ...
解决移动端HTML页面右侧空白问题
qq_41853417的博客
11-19 2万+
问题描述 响应式网页缩放时出现右侧空白 原因：子元素宽度撑开页面 通常纯pc端页面各元素固定宽度不会出现问题，但响应式页面部分元素定宽容易出现问题 测试后发现可能出现以下布局： 内部元素定宽，外部自适应，当缩放到小于内部宽度时出现空白 此时.blank定宽700px，撑开body使整体观感右侧有空白 不换行元素宽度过长 虽然给ul元素定宽300px，但有不换行white-space:nowrap;属性，内部li超过页面宽度后也会产生缩放空白，如果 <h1~6>等标签元素溢出 也会产生空白
flex页面无法显示,页面显示空白
code3389的博客
12-08 1109
1.页面无法显示，在浏览器中打开页面,页面空白IE中显示为一个叉(类似于图片路径未找到那类) 今天这个奇怪的问题困扰了我很久。我在编写代码的时候打开页面无法显示(所有页面，即使是最简单的一个带按钮的页面),将FB卸载重装了问题仍然出现。再重装FLASH PALYER(装的时候，我重启了机器) 问题消失, 不久之后问题再次出现。 于是我关闭了浏览器，清空了历史记录，cookie症状不再发生了。之后...
CSS 浏览器缩小之后页面错乱 块不见问题
LlanyW的专栏
03-06 1129
第二层DIV加上溢出隐藏： overfolw:hidden;浏览器正常100%显示的时候：今日推荐是看得见的。浏览器缩小，小于100%之后，今日推荐被挤不见了。给最后层div 加上宽度，左右外边距自适应。缩小之后了能显示出来了。
css布局有空行怎么办,flex布局换行空白间隙之align-content的使用
weixin_39611308的博客
08-04 1936
一、本文实现的效果图如下：布局右侧使用flex布局，超过3个则换行。父元素代码如下：.nav-right{width: 75%;padding: 10px;display: flex;/* 默认是水平的 */flex-direction: row;/*设置子元素的排列方向*/flex-wrap: wrap;/*溢出则换行*/}子元素代码如下：.nav-right-item{width: 33.33...
flex布局
空白的博客
06-21 365
&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发生原因还没来及的探索……就解决了。如果哪位遇到相同情况，可以溯其根源然后更加科学的解决此问题。...
检查那个元素导致网页右边出现白边
qq_43060570的博客
04-20 361
更改所有元素的背景，颜色和边框（你可以通过修改书签的链接内容来自定义颜色）。在你的出现右侧空白问题的页面上，你会看到有一个元素撑破了页面，一直顶到最右边的边界，修正这个元素就可以彻底的解决问题。这样，一旦页面出现了奇怪的问题时，你就可以通过点击这个书签来检查问题。
flex布局笔记
qq_41111677的博客
12-07 253
display:flex 指定HTML元素盒子类型为弹性 flex-direction 子元素的排列方向row|column justify-content 子元素在主轴方向上的对齐方式center|space-between|space-around|flex-start|flex-end align-items 子元素在侧轴方向上的对齐方式 flex-wrap 是否换行 align-content 修改...
深入解析flex布局中的flex-grow与flex-shrink计算原理与示例
在CSS的Flex布局中，flex-grow和flex-shrink是两个关键属性，它们共同决定了Flex容器内的项目如何适应容器空间变化。这两个属性对于实现响应式设计和自适应布局至关重要。以下是关于flex-grow和flex-shrink的深入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值