如何刪除懸垂DIV

我有以下的CSS和HTML文件：如何刪除懸垂DIV

body{ 
    text-align: center; 
    background-color: #eeeeee; 
    margin: 0; 
    padding: 0; 
    font-size: 1em; 
    font-family: Helvetica,Arial,sans-serif; 
} 
#wrapper{ 
    margin: 0 auto; 
    width:900px; 
    border: 1px solid #cccccc; 
    background-color:#ffffff; 
    padding:5px; 
} 
#banner{ 
    width:900px; 
    height: 150px; 
    background-image: url("../images/logo.png"); 
    background-repeat: no-repeat; 
} 
#separator{ 
    width:100%; 
    height: 5px; 
    border: 1px solid #993311; 
    background-color: #993300; 
} 
#navbar{ 
    height:25px; 
    width: 100%; 
    background-color: #434a4f; 
} 
#topsearch{ 
    height:25px; 
    width: 100%; 
    background-color: #434a4f; 
} 
#breadcrumb{ 
    float:left; 
    width: 30%; 
    background-color: #cccccc; 
} 
#search{ 
    float:left; 
    width:70%; 
    background-color: #fccfcf; 
} 
#main{ 
    clear: both; 
} 
#mainleft{ 
    float:left; 
    width: 21%; 
    background-color: #ff0000; 

} 
#maincenter{ 
    float:left; 
    width: 58%; 
    background-color: #00ff00; 
} 
#mainright{ 
    float:left; 
    width: 21%; 
    background-color: #0000ff; 
} 
#mainright1{ 
    width: 100%; 
    height:20%; 
    background-color: #0000ff; 
} 
#mainright2{ 
    clear:both; 
    width:100%; 
    height: 21%; 
    background-color: #0000ff; 
} 
#footer{ 
    clear: :both; 
    width: :100%; 
    background-color: #333333; 
}

和

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

     <title>test</title> 
     <meta name="description" content="" /> 
     <meta name="generator" content="Studio 3 http://aptana.com/" /> 
     <meta name="author" content="byteslash" /> 

     <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 

     <link href="css/template.css" type="text/css" rel="stylesheet"/> 
    </head> 
     <body> 

     <div id="wrapper"> 
      <div id="banner"></div> 
      <div id="separator"></div> 
      <div id="navbar"> 
       NavBar 
      </div> 
      <div id="topsearch"> 
       <div id="breadcrumb">Breadcrumb</div> 
       <div id="search">SearchBox</div> 
      </div> 

      <div id="main"> 
       <div id="mainleft"> 
        MainLeft 
       </div> 
       <div id="maincenter"> 
        MainCenter 
       </div> 
       <div id="mainright"> 
        <div id="mainright1">MainRight1</div> 
        <div id="mainright2">MainRight2</div> 
       </div>    
      </div> 
      <div id="footer"> 
       <h6>Footer</h6> 
      </div> 
     </div> 
    </body> 
</html>

如果選中的顏色，我有mainright2顯示爲藍色mainright1之上，這是打算，但mainright2掛在頁腳頂部。

我認爲，解決這個問題的方法之一是以某種方式爲所有高度的div主帳戶定義在其子內，但我不知道如何。

來源

2012-04-26 sergio

發生這種情況是因爲您的#main div的高度爲0像素 - 其所有內容均爲float ing。有很多方法來解決這個問題，其中之一是應用overflow: hidden到#main DIV，像：

#main{ 
    overflow: hidden; 
    clear: both; 
}

來源

2012-04-26 12:22:01

但溢出隱藏不會將這些div的內容切斷？我沒有指定高度，因爲我不知道這個內容有多高 – sergio 2012-04-26 12:30:06

然後指定另一個溢出類型。 – 2012-04-26 12:31:16

#footer { \t clear :: both; \t width :: 100％; \t background-color：＃333333; } 問題是那裏的額外冒號。不能相信我錯過了它。 – sergio 2012-04-26 12:33:11

在頁腳和主容器之間添加<div style="clear:both;"></div>。

來源

2012-04-26 12:19:09 gorelative

你有你的風格的錯誤#footer

clear: :both;

刪除第二結腸。

編輯：和另一個，但那一個並不壞，因爲默認情況下，div的寬度爲100％。

來源

2012-04-26 12:25:30

如何刪除懸垂DIV

回答

相關問題