如何使DIV的高度固定,当超出固定高度时,出现自动滚动条

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使DIV的高度固定,当超出固定高度时,出现自动滚动条相关的知识,希望对你有一定的参考价值。

参考技术A

使用关键代码:overflow-y: auto,并且限制高度实现功能。

实例演示如下:

1、html代码如下:一个简单的div,暂时内容为空。

css样式如下:

此时页面展示如下:

2、在第一步div加入一些文字,如下:

此时页面展示如下:已自动展现滚动条。

扩展资料:

CSS的overflow 属性解析:

1、定义和用法。

overflow 属性规定当内容溢出元素框时发生的事情。

2、兼容性(浏览器支持)。

所有主流浏览器都支持 overflow 属性,任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

3、属性说明。

属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

可能的值如下:



布局:上下两个div高度固定,中间自适应

需求:经典布局 —— 头尾固定高度中间高度自适应布局

头部固定高度,宽度100%自适应父容器;

底部固定高度,宽度100%自适应父容器;

中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中间部分出现流动条;

整个内容填满浏览器可视区域,并且不超出此区域!

 

方法一:position:absolute定位,不设高,并改变"包含块"的尺寸渲染

固定头尾,所以,至少头和尾要用到position定位。因为浏览器大小是可以调节的,而且不同尺寸,不同分辨率的浏览器可视区域的高度是不固定的,

这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题,整个布局也就解决了一多半

最重要的一段就是中间部分绝对定位,top为头的高度,bottom为尾的高度

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gb2312">
    <title>头尾固定中间高度自适应布局</title>
    <style>
        html, body {
            height:100%;
            margin:0;
            padding:0
        }
        #dHead {
            height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:5;
            top:0;
        }
        #dBody {
            background:#FC0;
            width:100%;
            overflow:auto;
            position:absolute;
            z-index:10;
            top:100px;
            bottom:100px;
        }
        .mycontent {
            padding:20px;
        }
        #dFoot {
            height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:200;
            bottom:0;
        }
    </style>
</head>
<body>
    <div id="dHead">固定头部100px;</div>
    <div id="dBody">
        <div class="mycontent">
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
        </div>
    </div>
    <div id="dFoot">固定尾部100px</div>
</body>
</html>

效果如下:

经测试:IE7+、firefox、chrome、safari、opera均通过测试!

 

 

方法二:利用boxsizing改变盒子模型

实现原理是,先为html设定box-sizing然后,加上上下padding值。布局模块均采用position:relative定位。

然后,头部采用负向margin向上平移(因为有了html padding),如查采用负top的话需要为每个布局版加上负top;看实现代码:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gb2312">
    <title>头尾固定中间高度自适应布局</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        html {
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            padding:100px 0;
            overflow:hidden;
        }
        html, body {
            height:100%;
        }
        .top {
            position:relative;
            top:-100px;
            height:100px;
            background:#f60;
        }
        .side {
            top:-100px;
            position:relative;
            height:100%;
            background:#fc0;
            overflow:auto;
            width:200px;
            float:left;
            margin-right:0 !important;
            margin-right:-3px;
            overflow:auto;
        }
        .main {
            top:-100px;
            position:relative;
            overflow:auto;
            height:100%;
            background:#f30;
        }
        .bottom {
            top:-100px;
            position:relative;
            height:100px;
            background:#f60;
            clear:both;
        }
    </style>
</head>
<body>
<div class="top"> top </div>
<div class="side"> side <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>
<div class="main"> main <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br 以上是关于如何使DIV的高度固定,当超出固定高度时,出现自动滚动条的主要内容,如果未能解决你的问题,请参考以下文章

css, 怎样使td高度固定,当内容超出设定高度时,超出部分隐藏。

布局:上下两个div高度固定,中间自适应

如何使高度自动取决于屏幕分辨率

如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐藏

如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐藏

如何使父容器的高度设置为固定 px 高度和子内容高度之间的最大值?