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>