怎么通过判断div高度显示一个div内的部分内容

如何通过判断div高度显示一个div内的部分内容
假设我body里只有一个高度为1000的div 如何通过js 显示500px高度以内的内容 500到1000的隐藏起来？
只有1个div
------解决思路----------------------
#id {
overflow: hidden; width: 500px;
}

------解决思路----------------------
16.2.6 部分可见：overflow和clip

    visibility属性可以让文档元素完全隐藏，而overflow和clip属性允许只显示元素的一部分

    overflow

        overflow属性指定内容超出元素的大小时如何显示

        值
            visible
                默认值。
                如果需要，内容可以溢出并绘制在元素的边框的外面。
            hidden
                裁减掉和隐藏溢出的内容，
                即在元素尺寸和尺寸属性定义的区域外不会绘制内容。
            scroll
                元素一直显示水平和垂直滚动条。
                如果内容超出元素尺寸，允许用户通过滚动来查看额外的内容；
                此属性只负责文档在计算机屏幕中的显示，
                如果打印纸质文档滚动条是没有意义的。
            auto
                滚动条只是内容超出元素尺寸时显示，而非一直显示。

    clip

        overflow属性允许指定当内容超出元素边框时该如何显示；
        而clip属性明确指定了应该显示元素的哪个部分，不论是否溢出，
        该属性在创建元素渐进显示的脚本效果时特别有用。
        clip属性的值指定了绝对定位元素的裁剪区域；

        CSS2中，裁剪区域是矩形，
        不过该语法预留了裁剪其他形状的可能。

        语法
            rect(top right bottom left)
            相对于元素边框的左上角，
            top、right、bottom、left指定了裁剪矩形的边界。
            4个值必须包含明确的单位，不能使用百分比；
            可以使用负值，
            可以使用auto指定裁剪的边缘就是元素的边缘

        示例
            <style>
                .box {
                    width: 200px; height: 200px;
                    background-color: green;
                    border: solid 1px red;
                }
                .small {
                    position:absolute;
                    background-color: gray;
                    clip: rect(0px 100px 100px 0px);
                }
                .left-box {
                    position:absolute;
                    left: 300px;
                    background-color: chocolate;
                    clip: rect(auto 100px auto auto);
                }
            </style>

            <div class="box"></div>
            <div class="box small"></div>
            <div class="box left-box"></div>
------解决思路----------------------
body  {
overflow: hidden;
height: 500px;
}

div {
  height: 1000px;
}
------解决思路----------------------



<!DOCTYPE html>

<html>

<head>

  <title>test</title>

  <style type="text/css">

  .showBox{

    height:100px;

    width: 100px;

    background: red;

    overflow:hidden;

    position:absolute;

    clip: rect(auto auto 50px auto);

  }

  </style>

</head>

<body>

<div class="showBox">Drag me</div>

</body>

</html>

怎么通过判断div高度 显示一个div内的部分内容

相关推荐

怎么通过判断div高度显示一个div内的部分内容