Нижний колонтитул нижнего колонтитула CSS CSS

Question

Как Google сделал цветную панель, расположенную на нижнем колонтитуле this page.

Возможно ли сделать это в CSS и расширить его на 100% от ширины?

Answer 1

Это довольно легко сделать в CSS. Сделайте div (в данном случае .googlebar), который имеет ширину 100% и, тем не менее, вы хотите (я выбрал 5px).
Затем поместите 4 пролета внутрь, покажите их встроенным блоком, установите ширину на 25% (поскольку их 4) и высота до 100%.
Все, что осталось сделать, это изменить цвета, и вы сделали:

.googlebar{ 
 
    width:100%; 
 
    height:5px; 
 
} 
 
.googlebar span{ 
 
    display:inline-block; 
 
    width:25%; 
 
    height:100%; 
 
} 
 
.googlebar span.blue{ 
 
    background:#0089FA; 
 
} 
 
.googlebar span.red{ 
 
    background:#FF002B; 
 
} 
 
.googlebar span.orange{ 
 
    background:#FFA900; 
 
} 
 
.googlebar span.green{ 
 
    background:#00A753; 
 
}

<div class="googlebar"> 
 
    <span class="blue"></span><span class="red"></span><span class="orange"></span><span class="green"></span> 
 
</div>

Answer 2

Это будет делать это для вас: https://jsfiddle.net/xtat0oa6/1/

HTML

<div class="footer"> 
    <div class="div1"> 

    </div> 
    <div class="div2"> 

    </div> 
    <div class="div3"> 

    </div> 
    <div class="div4"> 

    </div> 
</div> 

CSS

.footer { 
    margin-top: calc(100vh - 5px); 
} 

.div1 { 
    width: 25%; 
    height: 5px; 
    background-color: blue; 
    float: left; 
} 

.div2 { 
    width: 25%; 
    height: 5px; 
    background-color: red; 
    float: left; 
} 

.div3 { 
    width: 25%; 
    height: 5px; 
    background-color: orange; 
    float: left; 
} 

.div4 { 
    width: 25%; 
    height: 5px; 
    background-color: green; 
    float: left; 
}