Question

我有填充问题。我的侧边栏是318px宽，我的内容是642px宽，我的页脚是642px宽，并与我的内容对齐。我的侧边栏和内容两者都有一个20px的填充，但是我的侧边栏应该在页面底部全高，并且只要有更多内容也会向下推动页脚。如果这是太多的信息我很抱歉，但我想尽可能多地提供详细信息。

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

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

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

1 个答案: