设置min-width,小于设置值，浏览器出现滚动条

最新推荐文章于 2023-09-15 21:25:40 发布
最新推荐文章于 2023-09-15 21:25:40 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： css 文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q566114/article/details/120527313
版权

html {

    min-width: 900px;

    overflow-x: auto;

    overflow-y: hidden;

}

注意：一定要将overflow属性加在html元素下，加在body或者其他元素下，显示会有问题

晓恒
关注
专栏目录
7个场景让你深入理解min max - width height
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
09-24 1万+
theme: channing-cyan 这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战 创作不易，点个赞再看呗! 关注专栏 - 学透CSS，让你走进CSS世界的深处 前言 日常开发的时候，大家有么有遇到下面这种情况：设置一个盒子，但是我们不知道有没有内容，并且有多少内容我们也不能确定，而且又不想出现滚动条，这个时候我们就不能设置具体高度，但是我们可以设置min-height来用最小的高度撑开盒子，并且随着内容的多少，盒子的高度可以动态调整，这样是不是就满足了我们的要求。min/ma.
min-width 和 overflow 属性搭配,出现横向滚动条
qq_39822451的博客
11-20 2518
<style> //当页面的可视区域的宽度小于页面设置的最小宽度的时候，出现滚动条 body{ min-width:2000px; overflow:auto;} </style> <script> alert($(window).width()); <script>
CSS属性探秘系列(五)：min-width
09-25
min-width 属性设置元素的最小宽度，该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。
滚动条显示
weixin_50552284的博客
01-27 767
横向滚动条的显示，由min-width和overflow两个属性来控制： #app{ height: 100%; min-width: 800px; overflow: auto; } 当窗口宽度小于min-width时，会出现横向滚动条。 可能会有这样的情况：某些内容已经看不见了，但是仍然没有出现横向滚动条。 这是因为：内容的显示与否，还要受各个组件的宽度影响。 当min-width < 窗口当前宽度 < 全部组件的固定最小宽度 时，不会出现滚动条，而有些内容已经看不见了。 所以
html设置页面缩小到一定尺寸出现滚动，大于一定尺寸滚动条消失
weixin_44168784的博客
08-13 963
刚开始怎么调都有问题，然后发现是最小宽高应设置在内部容器，代码如下
html设置最小宽度 滚动条,CSS教程:如何设置自动显示隐藏scrollbar滚动条，自定义外观样式/宽度，附demo示例大全...
weixin_35568959的博客
06-02 1223
显示滚动条当一个div的内容大于父容器的大小时，可设置 overflow: scroll自动显示滚动条：div {width:150px;height:150px;overflow:scroll;}overflow更多属性值如下：visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其...
css-浏览器缩小添加局部横向滚动条
weixin_44375186的博客
08-07 3304
  需要浏览器缩小出现局部滚动条说明你内容的宽度没有浏览器宽，以下css实现当浏览器横向缩小时，局部（如导航栏…）出现横向滚动条。效果如下： 正常状态 浏览器缩小状态   当容器的宽度小于容器里面整体内容的宽度时，你可以设置容器出现横向滚动条使页面不变形。 代码如下： <div style="width: 100%;overflow-x: auto"> --->外层容器，设置为100%，跟随浏览器宽度变化 <div style="min-width： 115
兼容IE6的min-width、min-height的简单方法
09-22
min-width属性可以设置元素的最小宽度，当浏览器窗口或者父元素的宽度小于设定值时，元素的宽度不会继续收缩，而是出现水平滚动条。min-height属性则定义了元素的最小高度，作用与min-width类似，仅用于高度。这两个...
IE6支持max-width/height与min-width/height(完美解决方案)
09-25
此外，overflow属性设置为hidden是为了防止内容溢出时出现滚动条或者不整洁的视觉效果。 同理，对于支持最小宽度的CSS属性min-width，IE6也不提供原生支持。但是，我们可以使用类似的技巧来让IE6支持这一属性。通过...
div模拟滚动条当div宽度小于18时滚动条不滚动
12-03
另外，还可以考虑使用JavaScript库如`Perfect Scrollbar`或`SimpleBar`来提供更一致的跨浏览器滚动条体验。这些库可以自定义滚动条样式，并通常能处理不同浏览器的兼容性问题。 总的来说，解决IE浏览器中宽度小于18...
CSS中height和min-height的区别
09-27
为了处理内容溢出，可以使用overflow属性，例如设置overflow: auto或overflow: scroll，这样当内容超出设定高度时，会显示滚动条来浏览隐藏的内容。 与之相对的，min-height属性则定义了元素的最小高度。如果元素的...
不用框架直接div布局，html有一个min-width值，未设高度，当改变窗口大小后，html和body的实际高度（自己未定义）比窗口小的多，页面下端有多余空白，页面自动多了水平滚动和垂直滚动条
NicSeY的博客
05-09 371
偶尔发现可能是给html 设置min-width的锅，去掉后好了，空白部分大小显示正常，不会莫名的有垂直滚动条，但不确定根本原因是不是这个
min-width,min-height，overflow，移动端
weixin_34101229的博客
04-10 409
1、有些时候我们是不知道中间内容区域有多高的，但又想让该区域的高度恰好能放下中间内容区域，这个时候我们可以使用min-height或者height: auto; min-width会继承父元素的width，而min-height不会。 2、<div style="width:100%; height:20px; background:#f00; min-width:800px;"&gt...
width,min-width,max-width三者的区别及如何使用
Technology_hands的博客
09-15 1353
3.2建议使用Min-width+max-width，这样的效果就是，默认显示宽度是max-width，自适应的区间是，min-width和max-width之间，小于Min-width就会出现滚动条。所以总结一下，我们只会使用4中形式，单独使用width，单独使用min-width,单独使用max-width，结合min-width和max-width这2个使用。因为是三个属性，会存在，仅用其中一个，或则两个一起用，或则三个一起用的情况，下面我们一一讲解。具体的效果大家可以自己在代码里面试试更有感觉。
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
xiaoxiali的专栏
01-23 3920
转自：http://www.cnblogs.com/adandelion/archive/2007/05/25/759858.html DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过. 辛苦几天的结果啊 平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口
限制html窗口最小宽度,给页面一个最小宽度，小于这个宽度时，出现横向滚动条...
weixin_33300279的博客
05-30 3830
这里以vue-cli初始化的项目为例：1. body,htmlhtml,body {height: 100%;width: 100%;}2. App.vue中#app {height: 100%;width: 100%;}3. Home.vue组件title.home {min-width: 1024px; // 设置的最小宽度，小于1024时，会出现滚动条min-height: 100%;bac...
css滚动条占了宽度,css – 计算定位元素时的滚动条宽度
weixin_35537968的博客
08-04 1846
我有一个最大宽度的布局,当屏幕宽度大于最大值时,它是水平居中的.布局包括一个固定的标题&菜单;当屏幕宽度小于最大值时,菜单的左侧位置为0,并且当屏幕宽度超过最大值时,菜单的左侧位置需要与布局的其余部分的左边缘齐平.这是它应该如何看：*{Box-sizing:border-Box;margin:0;padding:0;}header{align-items:center;background...
eo-table设置min-width不生效
最新发布
10-13
`eo-table` 是 Element Plus 的表格组件，在 Vue.js 中使用时，如果你发现设置 `min-width` 属性后表格列并没有按照预期最小宽度渲染，可能是以下几个原因： 1. **CSS优先级问题**：检查样式表中是否有其他选择器覆盖了 `min-width` 设置。Element UI 或自定义的 CSS 可能对 `.el-table__column` 类有默认样式。你可以尝试使用 `!important` 来提高优先级。 ```css .el-table__column { min-width: 100px !important; } ``` 2. **动态设置**：如果 `min-width` 是通过数据驱动动态设置的，请确保在 DOM 更新之后设置了正确的值，例如在 `mounted()` 生命周期钩子里设置。 3. **单位问题**：确认 `min-width` 的单位是像素 (`px`) 或者其他可以应用到表格列宽度的单位。 4. **浏览器兼容性**：某些老版本的浏览器可能不支持 `min-width` 或者它的计算方式与其他属性冲突。你可以检查一下目标浏览器的文档。 5. **元素本身限制**：有些情况下，表格列内容过长可能会自动撑大宽度，而不是受 `min-width` 控制。这时，可以考虑增加容器的最小宽度或者调整表格布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值