1

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

在此处输入图像描述

的代码是这样的：

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


}

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

4

3 回答 3

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-12T13:30:08.373 回答
0

海特先生纸袋

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

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/

祝你好运！

于 2013-01-12T13:51:12.613 回答
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-12T13:36:12.163 回答