如何让div显示只下半部分

Question

要求：1、背景色未知（背景可能是图片）
2、不能更改节点树位置

Answer 1

使用绝对定位和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>

Answer 2

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

Answer 3

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

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