首页 > 如何让div显示只下半部分

如何让div显示只下半部分

要求:1、背景色未知(背景可能是图片)
2、不能更改节点树位置


用JS将上面的内容替换为空格?怎么样?这样不会改变DOM结构。只是替换掉了上面的内容。


overflow:hidden;和padding-top:-50%;吧

再看了下评论,发现你不是只要下半部分,上半部分也要,但是不要内容,是这个意思?
那可以考虑复制自己这个节点,然后把复制的节点宽度设为一样,高度设为一半,overflow:hidden;position:absolute;left:0;top:0;,内容清空,作为子节点添加到当前节点里面去


使用绝对定位和overflow。在下面的代码中,只显示下半部分的4,5,6。
重点是overflow:hidden;top:-50%;

<style type="text/css">
        .main{width: 200px; height: 200px; border: 5px solid #CA8080; position: relative; overflow: hidden;}
        .content{background-color: #96C39E; position: absolute; width: 100%; height: 100%; top: -50%; left: 0;}
</style>



<div class="main">
    <div class="content">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
</div>


【热门文章】
【热门文章】