要求: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>