网页设置通栏后，缩小页面有一部分不显示

最新推荐文章于 2023-07-07 18:05:40 发布
最新推荐文章于 2023-07-07 18:05:40 发布
阅读量2.1k 收藏 3
点赞数 1
分类专栏： CSS 文章标签： 网页通栏 通栏设置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lean_on_Me/article/details/82966571
版权

  今天在写一个小练习的时候发现，设置通栏背景width:100%  网页缩小之后，有一部分不显示.....

  甚是头疼啊，查阅了相关资料才知道，设置的width：100%，是相当于当前文档流而言的，也就是浏览器窗口的大小。

假设，你的网页主体宽度是1000px，而你将网页缩小到800px之后，那么通栏的宽度就是当前浏览器窗口的宽度800px，所以就hui有200px的宽度不显示

解决办法：

通栏的div设置min-width ：1000px就可以了（不能小于网页主体宽度）

 

 

这样就解决问题了！！！！

北方的文先生
关注
专栏目录
网页底部浮动通栏特效代码
03-20
网页底部浮动通栏特效代码是一种常见的网页设计技术，主要用于创建在页面滚动时始终保持在屏幕底部的横幅或栏。这种效果常用于放置版权信息、联系方式、社交媒体图标等，确保用户在浏览网页时能轻松访问这些内容。...
解决浏览器缩放导致页面显示不全问题
热门推荐
zhang1339435196的博客
04-16 1万+
问题 pc端web页面开发时,发现windows系统经常推荐用户使用125%、150%比例的缩放窗口，这样导致web页面被进行缩放，除此之外还有人为的按钮缩放。故此，在页面devicePixelRatio（设备像素比例）变化后，通过计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。 解决所用JS /** * @author trsoliu * @date...
CSS问题：导航栏设置通栏后，放大页面背景显示不全
qq_44805077的博客
10-07 1916
问题描述： 正常显示时：将网页放大到150%后： 解决办法： 当导航栏设置为width:100%或不给宽，是相当于当前文档流而言的，也就是浏览器窗口的大小。 此时假设浏览器窗口大小为1000px，那么这个通栏的宽度就是1000px，此时如果放大浏览器为1200px时，这个通栏的宽度并不会改变，仍为1000px，这时就会出现200px通栏的背景色无法显示。 添加通栏min-width :1200px(不能小于网页主体宽度） 补充： 若同时设置了width和max-width两个属性，则以下面规则显示宽度
css中background常用属性详解
weixin_46719229的博客
09-04 543
background常用属性详解 background-color 为元素设置背景颜色 值 描述 color_name 规定颜色值为颜色名称的背景颜色（比如 red）。 hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 transparent 默认。背景颜色为透明。 inherit 规定应该从父元素继承 background-color 属性的设
html图片缩放全部显示不全,100% width CSS 在缩小/放大窗口时候内容被截断或显示不全...
weixin_30327815的博客
06-07 6153
故障现象：当我们在写代码的时候如果，页面头部(#header )样式定义使用了100%宽度，那么当我们把浏览器窗口缩小的时候就会发现有部分内容被截断或显示不全；原因分析：当窗口缩小时，浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(比如你设置的网页整体宽度为960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个...
HTML页面放大缩小被遮盖导致页面不显示
qq_41910353的博客
07-12 1556
可能出现的两种情况单个页面 解决方法 在外层div添加class="layui-card"下一层div添加 class="layui-card-body"再添加如下事件 $(document).ready(function() { window.onresize = resizeDiv; resizeDiv(); }); function resizeDiv(){ $(".layui-card").css("min-height",window.innerHeight*0.9
网页顶部通栏
08-24
网页顶部通栏
网页底部浮动通栏、导航条
10-16
网页底部的浮动通栏与导航条是网页设计中常见的元素，它们为用户提供了一种便捷的交互方式，即使在页面滚动时也能保持可见。这个主题主要涉及CSS（层叠样式表）布局技术，包括定位（positioning）、固定定位（fixed ...
网页设计的尺寸和网页中广告设计的规则
09-22
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是...3、在ps里面做网页可以在800*600状态下显示全屏，页面的下
网页底部浮动通栏.rar
07-04
网页底部浮动通栏是网页设计中一种常见的布局方式，它使得底部栏在用户滚动页面时始终保持可见，提供持续的导航或信息展示。这种效果在现代网页设计中被广泛应用，尤其对于那些希望用户能够轻松访问重要链接或服务的...
浏览器窗口缩小后,滚动条拉至右边显示空白
Dreamy_LIN的博客
05-13 2697
问题描述: 当浏览器缩小后,出现滚动条,拉至右边,显示出来的部分为空白． 原因： 通过控制台的查看，可得知，浏览器窗口缩小后，子元素的宽度大于父元素的宽度，子元素将父元素撑开所致，如图： 解决方案： 在父元素上添加样式: style="width:expression(document.body.clientWidth <= 1200? '1200px': 'auto');min-width:1200px" 由于IE6不支持min、max,为了兼容,故使用width:expression(docu
解决css页面放大后左端显示不全情况
最新发布
chen的博客
07-07 952
的作用是将元素水平居中，即使左右两侧的外边距均为零。这通常用于将具有固定宽度的块级元素水平居中，比如将容器居中显示在页面中。需要注意的是，margin: 0 auto;只对具有固定宽度的块级元素有效，并且需要将父容器的宽度设置为明确的值。
html左侧导航栏显示不全,左侧导航栏 隐藏 显示
weixin_39934613的博客
05-30 897
HTML:clickCSS:.navslid {width: 200px;height: 500px;background-color: #1A2226;display: inline-block;}@keyframes show {from {width: 0;}to {width: 200px;}}@keyframes hide {from {width: 200px;}to {width: ...
网页下拉列表里内容显示不了_网页设计实验报告二
weixin_35689877的博客
01-29 1815
案例综述：为了使网页具有统一的风格，通常在网页中使用CSS样式，并且一般都将CSS样式的设置放在网页制作的第一步，当然也可以边制作网页边进行设置，然后将CSS样式应用到网页中即可。实现步骤：1、打开HTML网页步骤：①将素材ch6文件夹复制到D:\下，启动DM CS6，将D:\ch6设置为本地站点根目录，D:\ch6\images\为默认图像文件夹。②在“文件”面板中双击index.ht...
电脑缩小,电脑网页缩小了怎么恢复？电脑网页缩小的三种恢复方法
weixin_33582801的博客
08-11 1万+
有些时候电脑打开浏览器看到的网页与以往不一致，好像是缩小版的版面，看起来很不方便。有时候，网页缩小有可能是意外操作，也有可能是系统出现异，有什么办法解决呢？大家不必太担心，今天就和大家一起分享网页缩小后快速恢复的办法。具体方法如下:解决方法1:win8.1 - 14 、当你看到的网页缩小后(如下图示)，字显示得很小，令你一筹莫展时，请按照下面的方法用鼠标点击浏览器的菜单做就ok了。windows7...
缩放页面时，让改变某些元素属性
Gqiangqiang的博客
02-15 567
有时我们或许会用到在放大到一定程度时让某个元素属性发生改变的效果，这里就隐藏一下搜索框旁边的按钮。
CSS学习笔记--导航栏元素由于页面缩小而被挤到下一行的解决方法
runwuwushengxiyu的博客
05-29 602
CSS学习笔记--导航栏元素由于页面缩小而被挤到下一行的解决方法
浏览器网页缩放对页面的影响
waterCube的博客
07-23 7760
网页放大会将窗口大小缩小相应的放大倍数； 网页缩小会将窗口大小放大相应的缩小倍数的倒数分之一。 网页缩放时，有定长宽的元素不会受到缩放的影响；如果元素有设置max-width或者min-width，缩放到一定程度是该元素就不会受到缩放倍数的影响（放大时页面会产生滚动条）； 如果页面是百分比布局，没有设置max-width或者min-width，窗口不会产生滚动条。...
网页设计制作通栏banner
05-10
制作通栏banner的步骤如下： 1. 确定banner的尺寸和样式：根据网页布局和设计要求确定banner的宽度和高度，以及颜色、字体、图片等样式。 2. 制作banner的背景图：可以使用设计软件如Photoshop或Illustrator等制作一张高清的背景图，或者使用现成的图片素材。 3. 添加文本和logo：根据网页内容和设计要求，添加文本和logo等元素，注意排版和字体搭配的美观性和可读性。 4. 导出banner：将制作好的banner导出为适当的格式，如PNG或JPEG格式，以便在网页中使用。 5. 安排banner的位置和调整尺寸：将banner插入到网页中适当的位置，并按照需要进行调整尺寸和位置等操作，以达到最佳的视觉效果。 总之，制作通栏banner需要考虑多方面的因素，包括尺寸、样式、内容和设计要求等，需要综合考虑，才能制作出符合网页设计要求的高质量banner。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值