DIV溢出其容器

Question

我有4个divs，outer，inner,title和content。我想将inner div放在外部，title和content - 在inner div之内，一个在另一个之上。我定位外部和内部divs相对和另外2 - 绝对。

inner DIV不谋而合内thew outer，但title和content溢出inner股利。

我该如何解决我的CSS？

#outer { 
 
    width: 90%; 
 
    margin: 20px auto; 
 
    border: 2px solid red; 
 
    height: 500px; 
 
    position: relative; 
 
} 
 

 
#inner { 
 
    width: 100%; 
 
    border: 1px solid green; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
#inner .title { 
 
    width: 100%; 
 
    height: 63px; 
 
    padding-left: 1%; 
 
    padding-top: 5px; 
 
    border-radius: 2px; 
 
    float: left; 
 
    border: 1px solid blue; 
 
    background-color: lightblue; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
#inner .content { 
 
    padding: 2em 2em; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    background: #FFF; 
 
    height: auto; 
 
    display: block; 
 
    float: left; 
 
    border: 2px solid orange; 
 
    position: absolute; 
 
    top: 20%; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    <div class="title"></div> 
 
    <div class="content"></div> 
 
    </div> 
 
</div>

Answer 1

#outer { 
 
    width: 90%; 
 
    margin: 20px auto; 
 
    border: 2px solid red; 
 
    height: 500px; 
 
    position: relative; 
 
} 
 

 
#inner { 
 
    max-width: 100%; 
 
    border: 1px solid green; 
 
    height: 300px; 
 
    position: relative; 
 
padding: 0 5px; 
 
} 
 

 
#inner .title { 
 
    width: 100%; 
 
    height: 63px; 
 
    padding-top: 5px; 
 
    border-radius: 2px; 
 
    border: 1px solid blue; 
 
    background-color: lightblue; 
 
} 
 

 
#inner .content { 
 
    width: 100%; 
 
    height: 63px; 
 
    background: #FFF; 
 
    display: block; 
 
    border: 1px solid orange; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    <div class="title"></div> 
 
    <div class="content"></div> 
 
    </div> 
 
</div>

Answer 2

，以防止溢出title和content对方只是分配一个relative位置，他们并分配absolute位置其父。就这样

#outer { 
    width: 90%; 
    margin: 20px auto; 
    border: 2px solid red; 
    height: 500px; 
    position: relative; 
} 

#inner { 
    width: 90%; 
    border: 1px solid green; 
    height: 300px; 
    position: absolute; 
} 

#inner .title { 
    width: 100%; 
    height: 63px; 
    padding-left: 1%; 
    padding-top: 5px; 
    border-radius: 2px; 
    float: left; 
    border: 1px solid blue; 
    background-color: lightblue; 
    position: relative; 
    top: 0; 
} 

#inner .content { 
    padding: 2em 2em; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    background: #FFF; 
    height: auto; 
    display: block; 
    float: left; 
    border: 2px solid orange; 
    position: relative; 
    top: 20%; 
} 

<div id="outer"> 
    <div id="inner"> 
    <div class="title"></div> 
    <div class="content"></div> 
    </div> 
</div>