Question

我正在用CSS在Sublime文本（mac）中用html 5制作测试网页，我已经反复检查了问题所在，但无法解决问题。我希望橙色仅将页脚（和页眉边框的底部）着色，但它将填充整个网页（减去页眉）。

我该如何解决？

另外，我犯了什么错误？

ps-我曾尝试为aside和article着色，但是由于2的高度不同，并且页脚仍然为所有尚未着色的颜色（除了身体）着色，因此无法正常工作。另外在html中添加分隔符（br）无效，因为它会在页面顶部的颜色中添加分隔符

这是我的html代码：

    <!DOCTYPE html>
<html>
<head>
    <title>Task 3b</title>
    <link rel="stylesheet" type="text/css" href="../CSS/hwk.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>
                <span id="highlight">Main</span> Header
            </h1>
            <nav>
                <p><a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">SERVICES</a></p>
            </nav>
        </div>
    </header>

    <article>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </article>

    <aside>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            </p>
        </div>
    </aside>

    <footer>
        <div class="container">
            <p>
                -- &copy; 2019 | <a href="#">Contact Us</a><br>
                ----------
            </p>
        </div>
    </footer>
</body>
</html>

这是CSS：

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

a{
    text-decoration: none;
}

body{
    background-color: #f3f3f3;
    font-family: Arial;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

/* header */

header{
    background: #35424a;
    margin: 0;
    padding: 20px;
    color: #fff;
    text-align: center;
    border-bottom: 3px #e8491d solid;
}

header h1{
    float: left;
}

header #highlight{
    color: #e8491d;
}

header nav{
    float: right;
    padding-top: 4px;
}

header nav a{
    color: #e2e2e2;
    font-weight: bold;
}

header nav a:hover{
    color: #fff;
}

/* text */

article{
    float: left;
    width: 65%;
}

aside{
    float: right;
    width: 35%;
    border-left: 1px #a8a8a8 solid;
    box-sizing: border-box;
}

footer{
    text-align: center;
    color: #fff;
    background-color: #e8491d;
}

Footer colour (orange) colours whole webpage

谢谢！

Answer 1

您遇到的问题是您正在使用float来定位页面内容，因此页脚实际上占用了内容后面的空间。建议不要使用float来放置身体内容，而建议使用flexbox。要了解更多信息，请参见：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我修改了您的CSS和html，改为使用flexbox，它可以解决您遇到的问题。

HTML

<html>
<head>
    <title>Task 3b</title>
    <link rel="stylesheet" type="text/css" href="../CSS/hwk.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>
                <span id="highlight">Main</span> Header
            </h1>
            <nav>
                <p><a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">SERVICES</a></p>
            </nav>
        </div>
    </header>

    <div class="content">
    <article>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </article>

    <aside>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            </p>
        </div>
    </aside>
    </div>


    <footer>
        <div class="container">
            <p>
                -- &copy; 2019 | <a href="#">Contact Us</a><br>
                ----------
            </p>
        </div>
    </footer>
</body>
</html>

CSS

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

a{
    text-decoration: none;
}

body{
    background-color: #f3f3f3;
    font-family: Arial;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/* header */

header{
    background: #35424a;
    margin: 0;
    padding: 20px;
    color: #fff;
    text-align: center;
    border-bottom: 3px #e8491d solid;
}

header h1{
    float: left;
}

header #highlight{
    color: #e8491d;
}

header nav{
    float: right;
    padding-top: 4px;
}

header nav a{
    color: #e2e2e2;
    font-weight: bold;
}

header nav a:hover{
    color: #fff;
}

/* text */

article{

    width: 65%;
    background: white;
}

aside{
    width: 35%;
    border-left: 1px #a8a8a8 solid;
    box-sizing: border-box;
}

.content {
  display:flex;
    flex-direction: row;
}
footer{
    text-align: center;
    color: #fff;
    background-color: #e8491d;
}

链接到工作示例：https://jsfiddle.net/Matthew_/u2weo0g8/4/

Answer 2

您必须对 footer css 进行如下更改。只需添加clear: both;

footer {
    clear: both;
    text-align: center;
    color: #fff;
    background-color: #e8491d;
}

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

a{
    text-decoration: none;
}

body{
    background-color: #f3f3f3;
    font-family: Arial;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

/* header */

header{
    background: #35424a;
    margin: 0;
    padding: 20px;
    color: #fff;
    text-align: center;
    border-bottom: 3px #e8491d solid;
}

header h1{
    float: left;
}

header #highlight{
    color: #e8491d;
}

header nav{
    float: right;
    padding-top: 4px;
}

header nav a{
    color: #e2e2e2;
    font-weight: bold;
}

header nav a:hover{
    color: #fff;
}

/* text */

article{
    float: left;
    width: 65%;
}

aside{
    float: right;
    width: 35%;
    border-left: 1px #a8a8a8 solid;
    box-sizing: border-box;
}

footer {
    clear: both;			
    text-align: center;
    color: #fff;
    background-color: #e8491d;
}

<!DOCTYPE html>
<html>
<head>
    <title>Task 3b</title>
    <link rel="stylesheet" type="text/css" href="../CSS/hwk.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>
                <span id="highlight">Main</span> Header
            </h1>
            <nav>
                <p><a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">SERVICES</a></p>
            </nav>
        </div>
    </header>

    <article>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </article>

    <aside>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            </p>
        </div>
    </aside>

    <footer>
        <div class="container">
            <p>
                -- &copy; 2019 | <a href="#">Contact Us</a><br>
                ----------
            </p>
        </div>
    </footer>
</body>
</html>

有关 clear 属性的更多参考，请参见== What is a clearfix?

在this article - by Chris Coyer @ CSS-Tricks

中进行了解

页脚颜色全网页颜色-如何解决？

2 个答案: