<!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. RSA—非对称加密算法

    RSA:非对称加密算法加解密原理如下:已知:p,q,n,e,d,m,c其中:p与q互为大质数,n=p*q 公钥Pk(n,e):加密使用,是公开的 私钥Sk(n,d):解密使用,不公开 c:明文 m:密 ...

  2. sqlmap的详细使用

    各项参数讲的太仔细了,对于只会几个参数的我来说,太受用了. 先mark下 http://drops.wooyun.org/tips/143 http://drops.wooyun.org/tips/4 ...

  3. CSS自学笔记（10）:CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  4. KEIL MDK环境下uCOS-II在LPC17xx上的移植实例

    1. 知识准备 要想对ucos-ii的移植有较深的理解,需要两方面知识: (1)目标芯片,这里是lpc17xx系列芯片,它们都是基于ARMv7 Cortex-M3内核,所以这一类芯片的ucos-ii移 ...

  5. 图片和提交servlet的相对和绝对路径

    xx.jsp在根目录下,图片的路径为:<img height="33" src="images/enter.gif" width="148&qu ...

  6. logstash 根据type 判断输出

    # 更多ELK资料请访问 http://devops.taobao.com 一.配置前需要注意: 1.Use chmod to modify nginx log file privilege. E.g ...

  7. 拓扑图弹力布局呈现Flickr图片搜索结果：智能创新

    十年前有值得分享的图片我都存在Flickr上,可惜yahoo收购了Flickr之后堕落​好多年,最近yahoo在梅姐带领下Flickr团队终于恢复了生机,个人免费存储空间扩充到了1T,界面用户体验也有 ...

  8. 刚子扯谈：源于Chanel的图片描述

    文/刚子 2013年8月9日 北京晴 猴晒猴晒 开片语:真心不知道今天该分享点啥?先扯几句牢骚,我个人认为对朋友也够意思,虽然他们有的时候挺操蛋的,虽然还简称哥们儿,虽然还一起交流,但已经变成了无谓的 ...

  9. Python学习笔记2-Python神奇的语法和格式化输出

    先来看一个例子: class Fish: hungry=True def eat(self,food): if food is not None: self.hungry=False class Us ...

  10. auto, extern, register, static

    对于一个数据的定义,需要指定2中属性: 存储类型和数据类型: static int a; auto char c; register int d; 1 auto 2 extern 3 register ...