<!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. scikit-learn的主要模块和基本使用

    1.加载数据(Data Loading) 假设输入是特征矩阵或者csv文件,首先数据被载入内存. scikit-learn的实现使用了NumPy中的arrays,所以,使用NumPy来载入csv文件. ...

  2. python 初学笔记 （一）

    初学python第一天,希望自己真正了解计算机语言,并且做出成效. 写下学习笔记,记录学习进度,娱乐学习,不断成长. python详细介绍: python是什么?运用到哪里?有哪些在使用它? pyth ...

  3. docker 网络4种模式

    1.host 模式,使用docker run 时 使用--net=host 指定 docker 使用的网络和宿主机一样,在容器上看到的网卡ip就是宿主机上的ip 2.container 模式,使用-- ...

  4. Afinal开源框架中FinalActivity的使用

    1. 首先将afinal.jar文件复制到项目中的libs文件夹下 2. 让MainActivity不在继承系统的Activity,而是继承FinalActivity public class Mai ...

  5. Math.round(11.5)等于（）Math.round(-11.5)等于（）

    几天前去面试,这道简单的题目居然做错了,看来基础就是慢慢积累的.并不断使用和复习才会成为高手,假设基础不是那么熟练.恐怕在成为高手的路上会困难重重.所以在做项目的间歇时间.偶尔回顾一下最基础的知识.是 ...

  6. Android 仿微信滑动删除

    做这个功能主要是项目需要:找了很多资料但是效果都不理想,后来就自己研究写了一个,拿出来共享给大家,贴上代码大家慢慢看看,还是比较容易懂的. 主要代码: package com.zbq.widget; ...

  7. Oracle 字符集问题

    1 简介 ORACLE数据库字符集,即Oracle全球化支持(Globalization Support),或即国家语言支持(NLS)其作用是用本国语言和格式来存储.处理和检索数据.利用全球化支持,O ...

  8. Chrome 常用快捷键

    20160518     生活常识     Chrome常用操作快捷键 掌握Chrome的常用快捷键,不仅可以节约时间,还能够提高工作效率,最主要还可以装逼.以下是一些常用快捷键: 窗口操作快捷键: ...

  9. OpenCV系列--摄像头控制的简单代码

    操作系统:windows xp 开发工具:VS2008 opencv版本:2.1.0 依赖库:OpenCV2.1\lib\highgui.lib #include "cv.h" # ...

  10. 学习使用GitHub（一）--之入门

    因为经常Windows和linux系统交替的使用,在实验室一台电脑,在家一台电脑,自己的电脑和实验室的电脑上面的代码往往没法同步,以前由于种种原因(其实就是懒,没有学习GitHub这样的代码管理工具) ...