外部DIV不會擴展內部DIV

我正在將我的頁面包裝在主要包裝內div，但外部div不會擴展內部DIV。外部DIV不會擴展內部DIV

我想主要的外層div main-wrapper的高度與未發生因某種原因

我試圖找出這個問題的某個時候，但到目前爲止，還沒有成功頁面內容的增長。

我會幫助在此方面。

HTML結構樣品

<!-- 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; 
}

來源

2013-09-01 Learning

主包裝佔用了整個頁面？ http://jsfiddle.net/kevinPHPkevin/nbaxZ/1/ – Vector

嘗試刪除高度：100％;在主包裝上造型。可能還會刪除html/body/form上的相同樣式。 –

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

或者有時它只是有助於正確地清除浮動：

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

來源

2013-09-01 10:04:56

我試過這之前，它添加了水平滾動條... – Learning

@KnowledgeSeeker我沒有看到任何:) http://jsfiddle.net/nbaxZ/2/ –

我不知道我在做什麼我用這個＆在那它沒有工作，現在它的工作..謝謝..可能是我做了很多改變，我必須把它放在別的地方。反正謝謝，它解決了我的問題。忽略我最後的第一條評論，因爲我第一次犯了一些錯誤，當時我添加了'overflow：auto;'，當時它添加了H-Scroll條。無論如何感謝 – Learning

只需添加：

display: block;

和

float: left;

您.main-wrapper類，所以它看起來是這樣的：

.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; 
}

來源

2014-05-28 22:07:54

外部DIV不會擴展內部DIV

回答

相關問題