Dış DIV, iç DIV'lerle genişlemiyor

Question

Sayfamı bir ana sarıcıya div gönderiyorum ancak dış div iç div ile genişletmiyor.

Ben ana dış div main-wrapper yüksekliği Ben bazen ama şimdiye kadar hiçbir başarı için bu sorunu anlamaya çalışıyorum nedense

için olmuyor sayfa içeriği ile büyümek istiyorum.

Ben bu konuda yardımcı olacağını jsFiddle Example

kurdunuz.

HTML Yapısı örnek

<!-- main Container --> 
<div class="main-wrapper"> 
    <!-- Header --> 
    <div class="header-wrapper"></div> 
    <!-- Header --> 
    <div class="content-wrapper"> 
     <!-- Content Page--> 
     <!-- banner image wrapper --> 
     <div class="top-image-wrapper"></div> 
     <!-- banner image wrapper --> 
     <!-- page content wrapper --> 
     <div id="page-content-area" class="page-content-area"> 
      <div id="pg-intro-area" class="pg-intro-area"> 
       <div class="page-title"> 
        <h5>Page Title </h5> 

       </div> 
       <div class="page-text"></div> 
      </div> 
      <div class="pg-right-bar-wrapper"></div> 
     </div> 
     <!-- page content wrapper --> 
     <!-- Content Page--> 
    </div> 
    <div class="footer-wrapper"></div> 
</div> 
<!-- main Container --> 

CSS

html, body,form { height:100%; background-color:gray; } 
body { 
    font-family: Verdana,"Trebuchet MS",Arial,sans-serif; 
    -webkit-font-smoothing: antialiased; 
    font-size: 11px; 
    line-height: 16px; 
    height:100%; margin:0;padding:0; border:0; 
    color:#656565; 
} 
p 
{ 
    text-align:justify; 
    color:#687074; 
} 
hr 
{ 
    background-color: #ccc; 
    border: medium none; 
    height: 1px; 
    margin-bottom: 12px; 
    margin-top: 12px; 
} 
h5 /* for page title*/ 
{ 
font-size:15px; 
color:#028F41; 
margin:5px 0; 
} 
.page-title-lbl 
{ 
font-size:15px; 
color:#028F41; 
padding-left:105px; 
background-image:url("../images/title-bar.png"); 
background-repeat:no-repeat; 
text-shadow:0 0 0px #F6F6F6; 
} 
img 
{ 
border:0px 
} 

a { 
    color: #028F41; 
    text-decoration: none; 
} 

a:hover, 
a:focus { 
    text-decoration: underline; 
} 

input { 
    border: 1px solid #ccc; 
    font-size: 12px; 
    height: 20px; 
    line-height:20px; 
    vertical-align:middle; 
    padding-left: 5px; 
    color:#656565; 
} 
.btn 
{ 
    background-color: #0A8F36; 
    border: 0 none; 
    color: #FFFFFF; 
    font-size: 12px; 
    font-weight:bold; 
    height: 24px; 
    line-height:24px; 
} 

.margin5-0 
{ 
    margin:5px 0; 
} 
.margin10-0 
{ 
    margin:10px 0; 
} 
.margin20-0 
{ 
    margin:20px 0; 
} 
.padding5-0 
{ 
    padding:10px 0; 
} 
.padding10-0 
{ 
    padding:10px 0; 
} 
.padding20-0 
{ 
    padding:20px 0; 
} 
.margin10-000 
{ 
    margin:10px 0 0 0; 
} 
.margin00-5-0 
{ 
    margin:0 0 5px 0; 
} 
.margin00-10-0 
{ 
    margin:0 0 10px 0; 
} 
.margin20-000 
{ 
    margin:20px 0 0 0; 
} 
.margin00-20-0 
{ 
margin:0 0 20px 0; 
} 

.main-wrapper 
{ 
    width:1000px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
margin:0px auto 0px auto; 
background-color:#fff; 
padding-left:10px; 
padding-right:10px; 
} 
.header-wrapper 
{ 
height:130px; 
background-color:red; 

} 
.search-sm-wrapper 
{ 
    float:right; 
    width:250px; 
    height:100px; 
} 
.search-wrapper 
{ 
    text-align:right; 
    width:250px; 
    height:25px; 
} 
.txtSearch 
{ 
    float: right; 
    height: 20px; 
    width: 150px; 
    border-right:0px; 
} 
.btn-search 
{ 
float:right; 
} 

.language-wrapper 
{ 
    float:right; 
    text-align:right; 
    width:250px; 
    height:20px; 
} 
.language-link 
{ 
    color:#656565; 
} 
.sm-wrapper 
{ 
    float:right; 
    width:250px; 
    height:25px; 
} 
.menu-wrapper 
{ 
    height:30px; 
    width:1000px; 
    background-color:yellow; 
} 

.content-wrapper 
{ 
float:left; 
height:auto; 
} 
.footer-wrapper 
{ 
    float:left; 
    width:1000px; 
} 
.brand-logos 
{ 
    height:39px; 
} 
.marquee 
{ 
    float:left; 
    overflow:hidden; 
    height:39px; 
    width:1000px; 
    border:0px solid #f9f9f9; 
} 
.footer-banner 
{ 
    float:left; 
    height:96px; 
    width:1000px; 
} 
.footer-menu 
{ 
    display:none; 
} 
.footer-copyright 
{ 
    float:left; 
    height:20px; 
    width:1000px; 

} 





.top-image-wrapper 
{ 
    height:240px; 
    margin-top:6px; 
    background-color:#f5f5f5; 
} 


/* home page*/ 
.hp-intro-area 
{ 
    float:left; 
    width:570px; 
    margin-right:30px; 
} 
.hp-right-bar-wrapper 
{ 
    float:left; 
    width:400px; 
} 
.tabs-wrapper 
{ 
    margin:10px 0; 
    background-color:#E5E5E5; 
    height:210px; 
    overflow:hidden; 
} 
.tab-name-wrapper 
{ 
    width:400px; 
    height:30px; 
    line-height:30px; 
    background-color:#fff; 
    margin-bottom:10px; 
    overflow:hidden; 
} 
.tab-content-wrapper 
{ 
margin:0px 10px; 
} 
.hp-tab-image 
{ 
    float:left; 
    width:100px; 
    padding-right:10px;  
} 

/* Page */ 
.page-content-area 
{ 
    width:100%; 
    height:100%; 
} 
.page-sub-menu 
{ 
    width:100%; 
    height:23px; 
    padding:0px 0px; 
    background-color:blue; 
} 
.pg-intro-area 
{ 
    float:left; 
    width:570px; 
    margin-right:30px; 
} 
.pg-right-bar-wrapper 
{ 
    float:left; 
    width:400px; 
} 

Answer 1

.main-wrapper{ 
    overflow:auto; 
    /* other styles here */ 
} 

Ya bazen sadece düzgün yüzen temizlemek için yardımcı olur İlgili:

.main-wrapper:before, 
.main-wrapper:after { 
    content : ""; 
    display : table; 
} 
.main-wrapper:after { 
    clear : both; 
} 

Answer 2

Hemen ekleyin:

display: block;

ve .main-wrapper sınıfına

float: left;

, bu nedenle bu gibi görünecektir: Ana sarıcı tüm sayfayı kaplıyor

.main-wrapper 
{ 
     width:1000px; 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
    margin:0px auto 0px auto; 
    background-color:#fff; 
    padding-left:10px; 
    padding-right:10px; 

    display: block; 
    float: left; 
}