1. 首頁
  2. 問答
  3. 如何讓我的邊欄垂直填充空間？

如何讓我的邊欄垂直填充空間？

2013-01-12 104 views
1

我有一個非常簡單的佈局，看起來像這樣如何讓我的邊欄垂直填充空間？

enter image description here

的代碼是這樣的：

<!DOCTYPE html> 
<html> 
<HEAD> 
    <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css"> 
    </HEAD> 
<body> 

<div id="wrap"> 

    <div id="header"> 
    <p> Im the header. </p> 
    </div> 

    <div id="nav"> 
    <p> Im the nav. </p> 
    </div> 

    <div id="sidebar"> 
    <p> sidebar here </p> 
    <p> sidebar here </p> 
    <p> sidebar here </p> 
    <p> sidebar here </p> 
    <p> sidebar here </p> 
    <p> sidebar here </p> 
    <p> sidebar here </p> 
    <p> sidebar here </p> 
    <p> sidebar here </p> 
    </div> 

    <div id="main"> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    </div> 

    <div id="footer"> 
    <p> footer </p> 
    </div> 
</div> 

<body> 


</html>

這裏是CSS：

#wrap 
{ 
    width: 100%; 
    background-color:blue; 
    padding: 10px; 
} 

#header 
{ 
    background-color:white; 
    width: 98%; 
    float: left; 
    padding: 10px; 
} 

#nav 
{ 
    background-color:yellow; 
    padding: 10px; 
    width:100%; 

} 


#main 
{ 

    width:100%; 
    background:green; 
    padding: 10px; 

} 


#sidebar 
{ 
    background-color:pink; 
    float:right; 
    float:top; 
    padding: 10px; 
    width:20%; 
    height:100%; 

} 

#footer 
{ 
    background-color:orange; 
    padding: 10px; 
    width:100%; 
    clear:both; 


}

現在我只是不知道爲什麼我不能讓粉紅色的側邊欄垂直填充所有的空間，直到橙色頁腳？

來源

2013-01-12 Hithere Paperbag

回答

1

實施例：http://jsfiddle.net/s96Tw/

1）追加#sidebar內容到#main元件;

2）將position:relative添加到#main元素;

3）這個額外的代碼添加到CSS文件：

#sidebar { 
    height:100%; 
    position:absolute; 
    right:0; 
    top:0; 
    background:pink; 
}

來源

2013-01-12 13:30:08

0

你也可以給#wrap色淡紅並設置#main寬度〜70％，這是經常使用作爲解決方法。

現在你的邊框也是粉紅色的，因爲#wrap中的填充物，但是你可以玩，直到它符合你的需求。

#wrap 
{ 
    width: 100%; 
    background-color:pink; 
    padding: 10px; 
} 

#main 
{ 

    width:70%; 
    background:green; 
    padding: 10px; 

}

例子：http://jsfiddle.net/y9Yja/

來源

2013-01-12 13:36:12 Fabian

相關問題

 相關問題