<!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. redhat系列yum本地源配置

    1.挂载光盘,本示例挂载在/mnt下. 2.清除系统带的.repo文件,rm -f /etc/yum.repos.d/* 3.编辑自己的repo文件,内容如下: [local_server]   (库 ...

  2. NetworkManager配置网络——Red Hat 7 && CGSL V5

      NetworkManager服务管理网络方便在哪? 很重要的一点是:一个设备可以对应多个配置文件,但是同一时间只能有一个配置文件生效,这对于频率切换网络环境是非常方便的,不用再跑那个目录下去改配置 ...

  3. [问题解决] VNC连接黑屏或者灰屏+命令行

    1.修改配置文件/root/.vnc/xstartup 注:有的系统配置里有 –nolisten tcp 和 –nohttpd ,这两个是阻止Xwindows登陆和HTTP方式VNC登陆的,如果需要图 ...

  4. mvn 一些操作

    拷贝依赖包 mvn dependency:copy-dependencies -DoutputDirectory=src/main/webapp/WEB-INF/lib  -DincludeScope ...

  5. Oracle字符编码

    .检查服务器编码: 执行SQL语法: Java代码 select * from v$nls_parameters; 或 Java代码 select * from nls_database_parame ...

  6. Cortex-M3和Cortex-M4 Fault异常应用之二 ----- Fault处理函数的实现

    在项目处于调试期间,Fault处理程序可能只是一个断点指令,调试器遇到这个指令后停止程序的运行.默认情况下,由于非硬Fault被禁能,所有发生的非Fault都会上访成硬Fault,因此只要在硬Faul ...

  7. 项目与软件推荐之编辑器-QOwnNotes（刺激自己）

    项目与软件推荐之编辑器-QOwnNotes 今天推荐一款软件 QOwnNotes,是一款普通文本笔记软件.以某个路径为目录,罗列出目录下所有的 md 文件或者 txt 文件. 有如下亮点: 启动速度快 ...

  8. C语言的本质（1）——计算机与二进制

    人类的计数方式通常是"逢十进一",称为十进制(Decimal),大概因为人有十个手指,所以十进制是最自然的计数方式,各民族的文字中都有十个数字,而阿拉伯数字0-9是目前最广泛采用的 ...

  9. mysql 基本使用

    SQL分类 -------------------数据库------------ 创建数据库  create database xxx; 查询所有的数据库 show databases; 查询当前数据 ...

  10. Error 56: …… VPN Service has not been started

    vpn service在系统服务中名为Cisco System, Inc. VPN Service(cvpnd),异常情况下,该服务时停止的,并且手动启动该服务后没几秒,就被kill了.根据Zhiga ...