侧边栏/内容/页脚的填充问题答案

【问题标题】：Padding problems with sidebar/content/footer侧边栏/内容/页脚的填充问题
【发布时间】：2013-08-23 09:18:21
【问题描述】：

我遇到了填充问题。我的侧边栏是 318px 宽，我的内容是 642px 宽，我的页脚是 642px 宽并且与我的内容对齐。我的侧边栏和内容 both 周围都有 20 像素的填充，但我的侧边栏应该全高到页面底部，并在有更多内容同时向下推页脚时扩展。如果信息过多，我很抱歉，但我会尽量提供详细信息。

Here is a link to what I have so far 如果需要，您还可以查看完整 HTML 的源代码。我只是认为我正在谈论的元素是必需的，但这是为了以防万一。

HTML：

<!-- SIDEBAR -->
<div id="sidebar">
 <h1>Caul / Cbua</h1>


<div class="sidetext">
Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim,     at auctor mi tristique.
</div>

<h1>Commit</h1>
<div class="sidelink">
<ul>
  <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>

</div>

<!-- CONTENT -->
<div id="content">
<h1>News</h1>

<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />

<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>

<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

<!-- FOOTER -->
<div id="footer">
&copy; Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

CSS：

    /* Sidebar */
#sidebar {
background-color: #e7d9c9;
    background-image: url('/imgs/map.png');
    background-repeat: no-repeat;
/* height 100? */
width: 318px;
float: left;
padding-bottom: 20px;
}

.sidetext {
    padding: 5px 20px;
    font-size: 18px;
    font-family: Helvetica Neue;
    padding-bottom: 20px;
}

.sidelink {
    padding-bottom: 20px;
    margin: 0;
    padding: 0; 
    width:300px;
}

.sidelink ul {
    margin: 0; 
    padding: 0;
    margin-left: 20px;
}

.sidelink li {
    display: block;
    list-style: none;
}

.sidelink li a {
    display:block;
    font-family: Helvetica Neue;
    font-size:16px;
    color:#FFF;
    text-decoration:none;
    background-color:#1e416f;
    padding:5px;
    border-left:10px solid #FFF;
    padding-bottom: 20px;
}

.sidelink li a:hover {
    border-left:14px solid #1e416f;
    background-color:#e7d9c9;
    color: #1e416f;
}

h5 {
    font-family: Helvetica Neue: Light;
    font-size: 24px;
    color: #517f9c;
}

/* Content */
#content {
width: 642px;
float: right;
}

.article {
    padding: 5px 20px;
}

.articleimg {
    float: left;
    padding-right: 25px;
}


/* Footer */
#footer {
 font-family: Helvetica Neue: Regular;
 font-size: 12px;
 color: #94b9c4; 
 clear: both;
 width: 100%;
}

【问题讨论】：

在您链接的示例中，它看起来好像侧边栏位于页脚的顶部？如果您进入检查器并删除页脚元素，则侧边栏将扩展到页面底部。因此，当您说“侧边栏应该全高到页面底部”时，我有点困惑，您的意思是您希望页脚位于侧边栏的右侧吗？
你好，塞缪尔。谢谢回复。基本上我想要你在我的例子中看到的，只是正确的方式，因为我不相信在任何地方都有“padding-bottom”是正确的 CSS。有没有办法让侧边栏中的所有内容和内容中的所有内容都像我的示例中所示那样有 20 像素的填充？现在我也不确定在哪里放置我的页脚，因为我希望它更靠近底部并与内容内联。所以基本上它现在在哪里，只是向下推并有点“粘”并与内容保持一致。
另外，如果我添加更多内容，侧边栏不会完全变高。
好的，坚持住，我要做出一些改变。我会评论一切。我已经从网络上删除了整个网站。
sfu.ca/~skobe/stackHelp/index.html 你可以看看这个，让我知道我有多接近。

标签： html css

【解决方案1】：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>CAUL / CBUA</title>
    <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!-- HEADER -->
<div id="header">
    <div id="caul-logo">

        <h4>Nova Scotia Community College</h4>

    </div>
</div>

<div id="container">

    <!-- NAVIGATION -->
    <div id="navi">
        <a href="#">Directories</a>
        <a href="#">Committees</a>
        <a href="#">Resources</a>
        <a href="#">About</a>
    </div>

    <!-- CONTENT -->
    <div id="content">
        <h1>News</h1>

        <div class="article">
            <img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />

            <h2>Lorem Ipsum</h2>
            <h3>Friday, August 16th</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                    Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                    Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                        Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                        Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                            Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                            Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                                Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                                Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                                    Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                                    Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                                </div>

                            </div>

                            <!-- SIDEBAR -->
                            <div id="sidebar">
                                <h1>Caul / Cbua</h1>

                                <div class="sidetext">
                                    Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique.
                                </div>

                                <h1>Commit</h1>
                                <div class="sidelink">
                                    <ul>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- FOOTER -->
                            <div id="footer">
                                <p>&copy; Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div>
                        </div>
                    </body>
                    </html>

CSS

@charset "UTF-8";
/* CSS Document */

/* Main content styles */

html, body {
position: relative;
height: 100%;
font-family: Helvetica Neue: Regular;
}

h1 {
font-family: Helvetica Neue: Condensed Bold;
font-size: 24px;
color: #1d406f;
text-transform: uppercase;
margin-left: 20px;
}

h2 {
font-size: 18px;
color: #0f2233; 
}

h3, p {
font-size: 16px;
color: #0f2233;
}

a:link { color: #517f9c; }
a:highlight { color: #478ecc; text-decoration: underline; }

img {
display: block;
}

hr {
width: 90%;
margin: 0 auto;
margin-bottom: 20px;
}

/* Container */
#container {
position: relative;
margin: 0 auto;
width: 960px;
height:100%;
}

/* Header */
#header {
width: 960px;
height: 282px;
margin: 0 auto;
margin-top: 0;
background-image: url('http://redsky.incredifull.com/imgs/header.jpg');
}

#caul-logo {
top: 35px;
left: 20px;
width: 298px;
height: 91px;
position: relative;
background-image: url('/imgs/caul-header-logo.png');
}

h4 {
font-family: Helvetica Neue: Condensed;
text-decoration: bold;
font-size: 14px;
color: white;
text-transform: uppercase;
position: relative;
top: 215px;
left: 675px;
}

/* Navigation bar */
#navi {
font-family: Helvetica Neue: Condensed Bold;
font-size: 14px;
color: white;
text-transform: uppercase;
background-color: #1e416f;
height: 45px;   
margin-bottom: 20px;
padding-top: 20px;
}

#navi a {
color: white;
margin-left: 20px;
}

#navi a:hover {
background: white;
color: #1e416f;
}

.login {
color: #517f9c;
}

/* Sidebar */
#sidebar {
background-color: #e7d9c9;
background-image: url('/imgs/map.png');
background-repeat: no-repeat;
width: 33.33333333333333%;
float: left;
padding-bottom: 20px;
position: absolute;
height: 100%;

}

#sidebar.h1 {
border-bottom: thick;
border-bottom-width: 75%;
}

.sidetext {
padding: 5px 20px;
font-size: 18px;
font-family: Helvetica Neue;
padding-bottom: 20px;
}

.sidelink {
padding-bottom: 20px;
margin: 0;
padding: 0; 
width:300px;
}

.sidelink ul {
margin: 0; 
padding: 0;
margin-left: 20px;
}

.sidelink li {
display: block;
list-style: none;
}

.sidelink li a {
display:block;
font-family: Helvetica Neue;
font-size:16px;
color:#FFF;
text-decoration:none;
background-color:#1e416f;
padding:5px;
border-left:10px solid #FFF;
padding-bottom: 20px;
}

.sidelink li a:hover {
border-left:14px solid #1e416f;
background-color:#e7d9c9;
color: #1e416f;
}

h5 {
font-family: Helvetica Neue: Light;
font-size: 24px;
color: #517f9c;
}

/* Content */
#content {
width: 66.66666666666666%;
height: auto;
float: right;
padding-bottom: 20px;
position: relative;
height:100%;
}

.article {
width: 99%;
padding: 5px 20px;
}

.articleimg {
float: left;
padding-right: 25px;
}


/* Footer */
#footer {
text-align: left;
bottom: 0;
font-family: Helvetica Neue: Regular;
font-size: 12px;
width: 66.666666666%;
float: right;
clear: both;
margin-top: -50px;
}

#footer p {
text-indent: 20px;
color: #94b9c4; 
}

【讨论】：