Question

我有一个非常简单的布局，看起来像这样

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;


}

现在我不知道为什么我不能让粉红色的/侧边栏垂直填充所有空间，直到橙色页脚？

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

Answer 2

你也可以给 #wrap粉红色并将 #main width设置为~70％，这通常用作解决方法。

现在你的边框也是粉红色的，因为#wrap中有填充，但是你可以玩它直到它满足你的需要。

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

#main 
{ 

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

}

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

Answer 3

Mr.Hithere Paperbag

尝试一下......首先创建一个看起来像这个链接的图像

http://www.vanseodesign.com/blog/wp-content/uploads/2011/05/faux-columns-background.png

    background: url("faux-columns.png") repeat-y;

在css中

以下是关于相等列的4个教程：http://www.vanseodesign.com/css/equal-height-columns/

最好的运气！

如何让我的侧边栏垂直填充空间？

3 个答案: