`

CSS - div之overflow:scroll

    博客分类:
  • css
阅读更多
Definition

The overflow property specifies what happens if content overflows an element's box.


Usage

Default value: visible
Inherited: no
Version: CSS2
JavaScript syntax: object.style.overflow="scroll"



Property Values

Value                 Description
visible        The overflow is not clipped.
                It renders outside the element's box.
                This is default

hidden        The overflow is clipped,
                and the rest of the content will be invisible

scroll        The overflow is clipped,
                but a scroll-bar is added to see the rest of the content

auto       If overflow is clipped,
                a scroll-bar should be added to see the rest of the content

inherit      Specifies that the value of the overflow property
                should be inherited from the parent element.





如果 只有文本超出div宽度时,才显示scroll,
     则设为 :  overflow : auto





当然,还可以指定:

overflow-x :auto;
overflow-y :auto;









http://www.w3schools.com/cssref/pr_pos_overflow.asp















-
分享到:
评论

相关推荐

    解决页面使用overflow: scroll在iOS上滑动卡顿的问题1

    标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上,当HTML元素使用CSS属性`overflow: scroll`时,滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现,使得开发者...

    CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    <div class="your-class" style="overflow-y: scroll; overflow-x: hidden;"> ``` 或者更简洁地,使用`overflow: auto`通常也能达到相同的效果,因为浏览器会自动隐藏不需要的滚动条: ```css <div class="your-...

    overflow: hidden; 如何隐藏上面部分

    在网页布局设计中,合理利用CSS属性可以有效控制页面元素的显示效果,其中`overflow`属性就是一个非常实用的例子。本文将详细介绍如何通过设置`overflow: hidden;`来隐藏元素的一部分,特别是如何隐藏元素的上半部分...

    div滚动条 带滚动条的div div滚动条样式

    要实现 DIV 滚动条,需要在 DIV 元素中添加 CSS 样式表,并设置 `overflow` 属性。`overflow` 属性有三个取值:`visible`、`hidden` 和 `auto`。 * `overflow: visible;`:内容超出 DIV 区域时,将自动扩展 DIV ...

    全面阐述overflowhidden属性

    4. **制作滑动效果**:在移动端应用或网站中,为了实现平滑的滑动效果,可以将父元素的 `overflow` 设置为 `hidden`,而子元素设置为 `scroll` 或 `auto`,从而实现滑动浏览内容的效果。 #### 三、`overflow: ...

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    CSS中关于溢出隐藏的知识点包含了多个方面,具体包括overflow属性的使用、其各个值的含义、以及如何优雅地处理内容溢出的情况。 首先,CSS中的overflow属性是用于控制元素溢出内容的显示方式。这个属性可以指定当...

    div嵌套的div溢出时换行

    在CSS布局中,当一个内部`div`(子`div`)的宽度超过了其外部`div`(父`div`)设定的宽度限制,就会发生溢出。这种情况通常会导致内容超出父容器的边界,从而影响到页面的布局和美观。处理这种问题有多种方法,我们...

    css中position:relative和overflow:hidden之间的问题

    `overflow`属性则用于处理内容溢出其容器时的显示方式,它可以设置为`visible`(默认值,允许内容溢出)、`hidden`(隐藏溢出内容)、`scroll`(添加滚动条以查看溢出内容)或`auto`(根据需要添加滚动条)。...

    使用div做滚动条

    本文将详细介绍如何使用`<div>`标签及其相关的CSS属性来实现一个可自定义样式的滚动条。 #### DIV滚动条的基本概念 所谓DIV滚动条,是指在一个固定宽度和高度的`<div>`元素内部添加垂直或水平滚动条,以便于显示...

    jQuery UI custom

    div显示上下滚动条的css代码 <div style="width:260px;height:120px; overflow-y:scroll; border:1px solid;"> 这里是你要显示的内容 </div> 修改div滚动条颜色的css代码 <div style="width:260px;height:120px; ...

    CSS标签大全divcss.pdf

    在"CSS标签大全divcss.pdf"中,主要涵盖了CSS的一些核心概念和常见属性,包括字体属性、背景属性、区块属性、方框属性、边框属性、列表属性以及定位属性。以下是这些属性的详细说明: 1. 字体属性(Font): - `...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    `overflow`属性有以下几个值:`visible`(默认值,内容不会被剪切,会溢出其容器)、`hidden`(内容会被剪切,不显示滚动条)、`scroll`(无论内容是否需要,都会显示滚动条)和`auto`(当内容需要时,才会显示滚动...

    CSS_3样式.pdf

    ### CSS3 样式知识点详解 #### CSS3 背景属性 在 CSS3 中,开发者可以使用一系列增强的功能来定制网页元素的背景效果。这些功能不仅提供了更强大的控制能力,还增强了网页的设计美感。 ##### background - **描述...

    vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条

    <div ref="scrollArea" class="scroll-area"> <!-- 内容区域 --> </div> ``` 样式方面,我们可以为`.scroll-area`类添加必要的CSS,以便适应滚动条的显示: ```css .scroll-area { overflow: auto; -ms-...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.docx

    ### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中,滚动条的样式和行为对于提升用户体验至关重要。通过CSS(层叠样式表),开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...

    样式表总结

    - `overflow-x: scroll;`(水平方向上始终显示滚动条) #### 3. 垂直滚动 (Scroll Vertical) - `overflow-y: scroll;`(垂直方向上始终显示滚动条) ### 十、列表样式类型 (List Style Type) #### 1. 实心圆 ...

    CSS控制html文本溢出

    CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...

    css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    <body style='overflow:scroll;overflow-x:hidden'> <!-- 去掉横向滚动条 --> <body style='overflow:scroll;overflow-y:hidden'> <!-- 去掉纵向滚动条 --> ``` 此外,还可以使用`scrolling`属性,但这是HTML4中的...

Global site tag (gtag.js) - Google Analytics