html - 我怎样才能得到一个页脚，每台显示器都有 2 个内容 100% 的长度

Question

我想为我的元素创建一个页脚，但现在我遇到了如何使页脚达到显示器的全尺寸的问题。我有我的页脚代码，然后是我的 CSS。

.container {
    text-decoration: none;
    background-color: #333;
    float: left;
    display: block;
}

.container h1 {
    font-size: 18px;
    font-family:'Roboto Condensed', 'sans-serif';
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 6px;
}

.container a {
    text-decoration: none;
    font-size: 16px;
    color: rgba(106,106,106,1.00);
    padding-left: 20px;
    padding-right: 20px;
}

.container a:hover {
    color: maroon;
}

<footer>
        <div class="container">
            <h1>Finanzdienstleistung</h1>
            <a href="#">Versicherungen</a><br>
            <a href="#">Schadensabwickelung</a>
        </div>
        <div class="container">
            <h1>Vermietung</h1>
            <a href="#">Freie Wohnungen</a><br>
            <a href="#">Alle Wohnungen</a>
        </div>
</footer>

Answer 1

您可以将它们变成 display: table-cell 而不是 float ，以将它们保持在一行中并填充整个宽度:

footer {
  display: table;
  width: 100%;
}

.container {
    text-decoration: none;
    background-color: #333;
    display: table-cell;
}

.container h1 {
    font-size: 18px;
    font-family:'Roboto Condensed', 'sans-serif';
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 6px;
}

.container a {
    text-decoration: none;
    font-size: 16px;
    color: rgba(106,106,106,1.00);
    padding-left: 20px;
    padding-right: 20px;
}

.container a:hover {
    color: maroon;
}

<footer>
        <div class="container">
            <h1>Finanzdienstleistung</h1>
            <a href="#">Versicherungen</a><br>
            <a href="#">Schadensabwickelung</a>
        </div>
        <div class="container">
            <h1>Vermietung</h1>
            <a href="#">Freie Wohnungen</a><br>
            <a href="#">Alle Wohnungen</a>
        </div>
</footer>