主div中的内容溢出

时间:2014-08-14 22:13:57

标签: html css

我有一个主要的div与http://jsfiddle.net/d8kc4m2c/1/一样溢出。在小提琴中," Words"溢出内容div。我注意到当我从#content移除高度时,问题就消失了,但是,在我的实际html中,我试图将#content内的图像调整为百分比当然需要定义父高度。有办法解决这个问题吗?

<body>
<div id='head'>
    Hello
</div>
<div id='content'>
    Words
    Words
    Words
    <div id='inner'>inner</div>
    <img src='http://i.imgur.com/tz2mcrM.png'>
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
     Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
     Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
     Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
     Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
     Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
     Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
     Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
    Words
</div>    

html, body, #content{
height:100%;
}
#content{
  background-color:green;
}
#inner{
height:50%;
background-color:yellow;
}
img{
height:10%;    
}

编辑:添加了适当的小提琴链接。将小提琴中的代码复制到此处。

1 个答案:

答案 0 :(得分:0)

编辑:

看着他的小提琴后,你需要这样做:

html, body, #content{
    height:75%; //Whatever your height is actually supposed to be.
    overflow: scroll;
}