<!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

     <title>限制div高度，内容多了显示滚动条</title>

     <style type="text/css">

         div{ border-radius:5px;border:1px solidred;padding:10px;}

         #test{min-height:250px;overflow-y:auto;max-height:300px;}

     </style>

 </head>

 <body>

 <div>

     <div id="test">

         <table>

             <tr><td>1</td></tr><tr><td>2</td></tr>

             <tr><td>3</td></tr><tr><td>4</td></tr>

             <tr><td>5</td></tr><tr><td>6</td></tr>

             <tr><td>7</td></tr><tr><td>8</td></tr>

             <tr><td>9</td></tr><tr><td>10</td></tr>

             <tr><td>5</td></tr><tr><td>6</td></tr>

             <tr><td>7</td></tr><tr><td>8</td></tr>

             <tr><td>9</td></tr><tr><td>10</td></tr>

         </table>

     </div>

 </div>

 </body>

 </html>

主要是overflow-y：auto属性的添加

限制div高度当内容多了溢出时显示滚动条的更多相关文章

  1. div内容溢出时显示滚动条

    在style中添加overflow:scroll属性即可.

  2. Textarea高度随内容自适应地增长，无滚动条

    <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...

  3. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  4. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  5. 【UWP】仅在TextBlock文本溢出时显示Tooltip

    前言 这是我今天在回答SO问题时偶然遇到的,觉得可能还比较通用,就记录下来以供参考. 通常,我们使用ToolTip最简单的方式是这样: <TextBlock Text="Test&qu ...

  6. div高度根据内容自动增大

    1.很多时候我们希望容器高度能够自适应内部元素的变化,需要用到min-height属性. 2.有时候用了min-height还是不会随着内容自适应高度,您需要检查下容器的子元素是不是有浮动属性,当子元 ...

  7. css 内容溢出显示垂直滚动条，内容不超出就不显示滚动条

    搬运自:https://www.cnblogs.com/wangyuanyuanlovexuanxuan/p/7767767.html html: <style> .div1{ width ...

  8. css 文本溢出时显示省略号

    .text-ellipsis { width:100px; height:60px; overflow: hidden;//隐藏滚动条 text-overflow:ellipsis; white-sp ...

  9. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

随机推荐

  1. HealthKit框架参考（转）

    来自:http://www.cocoachina.com/ios/20140915/9624.html 本文由CocoaChina翻译组成员 唧唧歪歪(微博) 翻译自苹果官方文档:The Health ...

  2. C#性能优化实践【转】

    性能主要指两个方面:内存消耗和执行速度.性能优化简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短. 本文以.NET平台下的控件产品MultiRow为例,描述C# ...

  3. [Oracle] - 性能优化工具（3） - ADDM

    ADDM 通过检查和分析AWR获取的数据来推断Oracle数据库中可能的问题.并给出优化建议. 获取ADDM的方法例如以下: @?/rdbms/admin/addmrpt.sql 以下能够看一个样例: ...

  4. Swfit中视图跳转

    .跳转到任一UIViewController var sb = UIStoryboard(name: "Main", bundle:nil) var vc = sb.instant ...

  5. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  6. 用SQL脚本移除视图中存在的机器名

    用SQL脚本移除视图中存在的机器名 例子: msccdr.cdr.DimRMAReturnMethod CREATE VIEW CDR.DimRMAReturnMethod ( ReturnMetho ...

  7. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  8. poj3090--欧拉函数

    #include<iostream> using namespace std; //欧拉函数 int eular(int n){ ,i; ;i*i<=n;i++){ ){ n/=i; ...

  9. mysql性能监控工具Innotop

    mysql监控管理工具--innotop 1.innotop安装参考官网:http://innotop.googlecode.com/svn/html/installing.html # wget h ...

  10. css3 drop-shaow阴影效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...