<!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. web 之MVC

    MVC 把一个应用的输入.处理.输出流程按照Model, View, Controller 的方式进行分离,这样一个应用被分为三层:模型层.视图层.控制层. 1.View 2.Controller 在 ...

  2. 正则表达式之match与exec【转的 楼兰之风】

    彻底领悟javascript中的exec与match方法 阅读本文之前,请先看下面一道题: 题目17:Read the following javascript code: var someText= ...

  3. Spring包的方法WebUtils.getParametersStartingWith（request，String）

    举个例子,比如页面上有 <input type="text" name="p_name" value="aileen"> < ...

  4. android PopupWindow显示位置

    PopupWindow的显示及位置设置 window.showAtLocation(parent, Gravity.RIGHT | Gravity.BOTTOM, 10,10); 第一个参数指定Pop ...

  5. Android 微信分享信息

    随着微信越来越火,越来越多的应用要求有分享到微信的功能.虽然有很多平台都帮集成有分享功能,比如友盟.但是个人觉得友盟集成的东西太多了,自己封装得太过分了,很多资源文件也要带进去,所以感觉不是怎么好,所 ...

  6. nodejs递归创建目录，同步和异步方法

    nodejs递归创建目录,同步和异步方法.在官方API中只提供了最基本的方法,只能创建单级目录,如果要创建一个多级的目录(./aaa/bbb/ccc)就只能一级一级的创建,感觉不是很方便,因此简单写了 ...

  7. 网易云课堂_程序设计入门-C语言_第二周：判断_1时间换算

    1 时间换算(5分) 题目内容: UTC是世界协调时,BJT是北京时间,UTC时间相当于BJT减去8.现在,你的程序要读入一个整数,表示BJT的时和分.整数的个位和十位表示分,百位和千位表示小时.如果 ...

  8. [置顶] 编辑框Editext光标最后显示

    [MainActivity] package com.example.testeditext; import android.os.Bundle; import android.app.Activit ...

  9. dev gridcontrol 单箱效果

    private void gridView1_CellValueChanging(object sender, DevExpress.XtraGrid.Views.Base.CellValueChan ...

  10. C# 与 VB.NET 对比

    C# 与 VB.NET 对比 2008-06-20 15:30 by Anders Cui, 1462 阅读, 3 评论, 收藏, 编辑 Table of Contents 1.0       Int ...