css - Completely remove
overflow

Question

When using overflow: hidden, it does just that. Is there I was I can actually remove the overflow? For example, if you hide the overflow of one div, then have another directly under it, the overflow will keep the second div from being right under the first, it will have an empty space where the hidden overflow is. You can see this in my example JSFiddle here: http://jsfiddle.net/ZdvYg/

HTML:

<div id="id1">
    <p>This is text</p>
    <p>This is more text</p>
</div>
<div id="id2">
    <p>This is text</p>
    <p>This is more text</p>
</div>

CSS:

#id1 {
    background-color:red;
    height: 40px;
    overflow: hidden;
}

#id2 {
    background-color:yellow;
}

In the JSFiddle, I want to remove the whitespace where "This is more text" is, so the background colors should be touching.

score 2 · Accepted Answer

The paragraph margin/padding pushing down the element. Remove the margin/padding to get rid of the space:

http://jsfiddle.net/ZdvYg/1/

You can also add a float and clear to the DIV to even things out:

http://jsfiddle.net/ZdvYg/2/

#id1 {
    background-color:red;
    height: 40px;
    overflow: hidden;
    float: left; 
    width: 100%;
    clear: both;
}

score 0 · Accepted Answer

您至少有 3 种方法可以解决此问题：

将段落的边距重置为零

http://jsfiddle.net/ZdvYg/5/
```
p {margin:0}
```
在 div 上设置垂直填充

http://jsfiddle.net/ZdvYg/6/
```
div {padding:1px;}
```
在 div 上设置边框

http://jsfiddle.net/ZdvYg/7/
```
div {border:solid transparent 1px;}
```

最后要摆脱溢出（如果真的有很多要隐藏的话，这不是一个好主意）

回流 div 绘图在前面

http://jsfiddle.net/ZdvYg/8/

    div {position:relative;/* brings div to top layer at screen */}

css - Completely remove overflow

2 回答 2

Related

Reference

css - Completely remove
overflow