How to make CSS Bottom use space?

QQ_cazo · August 29, 2021

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}

.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.navbar a:hover {
background: #f1f1f1;
color: black;
}

.navbar a.active {
background-color: #04AA6D;
color: white;
}

.main {
padding: 16px;
margin-bottom: 30px;
}
</style>
</head>
<body>

<div class="navbar cf">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>

<div class="main">
<h1>Bottom Navigation Bar</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis venenatis odio nec imperdiet. Nam lobortis turpis arcu. Sed imperdiet urna et dolor semper sollicitudin. Donec sit amet augue vitae leo sollicitudin porta. Cras sit amet ipsum porta, efficitur massa sed, pretium eros. Suspendisse ligula tellus, placerat in tortor sit amet, hendrerit consequat enim. Praesent dapibus nec tellus sed tincidunt. Donec rhoncus massa ac dui luctus, sed porta est rutrum. Mauris rhoncus odio sed ex suscipit ullamcorper. Maecenas leo elit, eleifend quis tortor sed, consequat pellentesque quam.

Donec sed pretium metus. Sed in tincidunt dolor, vitae porta turpis. Nunc eu lectus in ligula feugiat sagittis at vitae orci. Donec vel tincidunt felis, nec imperdiet mauris. Morbi in metus vel purus sodales tristique. Sed consequat felis eget iaculis porttitor. Nullam sed molestie augue. Donec ac elementum tortor. Ut diam nunc, commodo eget accumsan eu, cursus in lectus. Praesent id scelerisque justo. Curabitur sollicitudin turpis risus. Praesent imperdiet tristique augue sed bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin erat massa, aliquet non dolor sit amet, gravida ultricies libero. Pellentesque tortor ex, pellentesque eget iaculis eu, molestie sed lorem.

Etiam tincidunt a orci ac iaculis. Nulla ultricies, sapien at vulputate rutrum, dui ex viverra quam, sed accumsan urna elit sit amet dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. In semper dolor non diam scelerisque mattis. Nulla in turpis faucibus, euismod orci vitae, varius justo. Proin consectetur aliquam nunc, non scelerisque nunc luctus quis. Morbi ac sapien vel neque porta lobortis nec at ex. In pellentesque, eros at congue sagittis, sem mi ultricies elit, auctor pellentesque risus nulla in nisl. Morbi sodales accumsan turpis aliquLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis venenatis odio nec imperdiet. Nam lobortis turpis arcu. Sed imperdiet urna et dolor semper sollicitudin. Donec sit amet augue vitae leo sollicitudin porta. Cras sit amet ipsum porta, efficitur massa sed, pretium eros. Suspendisse ligula tellus, placerat in tortor sit amet, hendrerit consequat enim. Praesent dapibus nec tellus sed tincidunt. Donec rhoncus massa ac dui luctus, sed porta est rutrum. Mauris rhoncus odio sed ex suscipit ullamcorper. Maecenas leo elit, eleifend quis tortor sed, consequat pellentesque quam.

Donec sed pretium metus. Sed in tincidunt dolor, vitae porta turpis. Nunc eu lectus in ligula feugiat sagittis at vitae orci. Donec vel tincidunt felis, nec imperdiet mauris. Morbi in metus vel purus sodales tristique. Sed consequat felis eget iaculis porttitor. Nullam sed molestie augue. Donec ac elementum tortor. Ut diam nunc, commodo eget accumsan eu, cursus in lectus. Praesent id scelerisque justo. Curabitur sollicitudin turpis risus. Praesent imperdiet tristique augue sed bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin erat massa, aliquet non dolor sit amet, gravida ultricies libero. Pellentesque tortor ex, pellentesque eget iaculis eu, molestie sed lorem.

Etiam tincidunt a orci ac iaculis. Nulla ultricies, sapien at vulputate rutrum, dui ex viverra quam, sed accumsan urna elit sit amet dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. In semper dolor non diam scelerisque mattis. Nulla in turpis faucibus, euismod orci vitae, varius justo. Proin consectetur aliquam nunc, non scelerisque nunc luctus quis. Morbi ac sapien vel neque porta lobortis nec at ex. In pellentesque, eros at congue sagittis, sem mi ultricies elit, auctor pellentesque risus nulla in nisl. Morbi sodales accumsan turpis aliquam elementum. Nulla sed odio ex. Sed tincidunt felis eget sapien laoreet semper. Donec vulputate aliquam pharetra. Pellentesque a dignissim metus.

Praesent lectus felis, interdum quis pellentesque ut, egestas sit amet metus. Sed a dolor nulla. Curabitur eget tincidunt felis. Nunc vitae mi libero. Morbi posuere justo arcu, nec suscipit risus cursus sit amet. Maecenas velit velit, vehicula non sollicitudin eget, iaculis non nisi. Aliquam in porttitor enim, sit amet aliquam turpis. Donec a lorem felis. Donec vestibulum, velit ut placerat dignissim, lectus mauris consectetur nunc, ut lacinia urna tortor eu ex. Praesent semper posuere lobortis. Suspendisse suscipit tincidunt pellentesque. Vestibulum viverra hendrerit nibh, eu euismod felis viverra vitae. Proin at rhoncus mauris. Mauris porttitor ipsum nec sagittis sodales. Integer convallis tellus elit, ac congue arcu consectetur non.

Suspendisse id rutrum diam. Maecenas suscipit dapibus dui imperdiet mattis. Nunc dapibus velit ac tincidunt dictum. Sed mollis lectus nisl, cursus viverra nisi lobortis id. Phasellus et mi a augue pharetra placerat. Praesent eu sagittis dolor. Pellentesque id metus vulputate, fermentum augue at, commodo eros. Duis ac erat scelerisque, bibendum sapien finibus, accumsan ipsum. In semper gravida mauris at pretium. Maecenas mi nibh, eleifend vitae purus quis, pharetra vulputate ex. Quisque viverra pellentesque commodo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis venenatis odio nec imperdiet. Nam lobortis turpis arcu. Sed imperdiet urna et dolor semper sollicitudin. Donec sit amet augue vitae leo sollicitudin porta. Cras sit amet ipsum porta, efficitur massa sed, pretium eros. Suspendisse ligula tellus, placerat in tortor sit amet, hendrerit consequat enim. Praesent dapibus nec tellus sed tincidunt. Donec rhoncus massa ac dui luctus, sed porta est rutrum. Mauris rhoncus odio sed ex suscipit ullamcorper. Maecenas leo elit, eleifend quis tortor sed, consequat pellentesque quam.

Donec sed pretium metus. Sed in tincidunt dolor, vitae porta turpis. Nunc eu lectus in ligula feugiat sagittis at vitae orci. Donec vel tincidunt felis, nec imperdiet mauris. Morbi in metus vel purus sodales tristique. Sed consequat felis eget iaculis porttitor. Nullam sed molestie augue. Donec ac elementum tortor. Ut diam nunc, commodo eget accumsan eu, cursus in lectus. Praesent id scelerisque justo. Curabitur sollicitudin turpis risus. Praesent imperdiet tristique augue sed bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin erat massa, aliquet non dolor sit amet, gravida ultricies libero. Pellentesque tortor ex, pellentesque eget iaculis eu, molestie sed lorem.

Etiam tincidunt a orci ac iaculis. Nulla ultricies, sapien at vulputate rutrum, dui ex viverra quam, sed accumsan urna elit sit amet dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. In semper dolor non diam scelerisque mattis. Nulla in turpis faucibus, euismod orci vitae, varius justo. Proin consectetur aliquam nunc, non scelerisque nunc luctus quis. Morbi ac sapien vel neque porta lobortis nec at ex. In pellentesque, eros at congue sagittis, sem mi ultricies elit, auctor pellentesque risus nulla in nisl. Morbi sodales accumsan turpis aliquam elementum. Nulla sed odio ex. Sed tincidunt felis eget sapien laoreet semper. Donec vulputate aliquam pharetra. Pellentesque a dignissim metus.

Praesent lectus felis, interdum quis pellentesque ut, egestas sit amet metus. Sed a dolor nulla. Curabitur eget tincidunt felis. Nunc vitae mi libero. Morbi posuere justo arcu, nec suscipit risus cursus sit amet. Maecenas velit velit, vehicula non sollicitudin eget, iaculis non nisi. Aliquam in porttitor enim, sit amet aliquam turpis. Donec a lorem felis. Donec vestibulum, velit ut placerat dignissim, lectus mauris consectetur nunc, ut lacinia urna tortor eu ex. Praesent semper posuere lobortis. Suspendisse suscipit tincidunt pellentesque. Vestibulum viverra hendrerit nibh, eu euismod felis viverra vitae. Proin at rhoncus mauris. Mauris porttitor ipsum nec sagittis sodales. Integer convallis tellus elit, ac congue arcu consectetur non.

Suspendisse id rutrum diam. Maecenas suscipit dapibus dui imperdiet mattis. Nunc dapibus velit ac tincidunt dictum. Sed mollis lectus nisl, cursus viverra nisi lobortis id. Phasellus et mi a augue pharetra placerat. Praesent eu sagittis dolor. Pellentesque id metus vulputate, fermentum augue at, commodo eros. Duis ac erat scelerisque, bibendum sapien finibus, accumsan ipsum. In semper gravida mauris at pretium. Maecenas mi nibh, eleifend vitae purus quis, pharetra vulputate ex. Quisque viverra pellentesque commodo.am elementum. Nulla sed odio ex. Sed tincidunt felis eget sapien laoreet semper. Donec vulputate aliquam pharetra. Pellentesque a dignissim metus.

Praesent lectus felis, interdum quis pellentesque ut, egestas sit amet metus. Sed a dolor nulla. Curabitur eget tincidunt felis. Nunc vitae mi libero. Morbi posuere justo arcu, nec suscipit risus cursus sit amet. Maecenas velit velit, vehicula non sollicitudin eget, iaculis non nisi. Aliquam in porttitor enim, sit amet aliquam turpis. Donec a lorem felis. Donec vestibulum, velit ut placerat dignissim, lectus mauris consectetur nunc, ut lacinia urna tortor eu ex. Praesent semper posuere lobortis. Suspendisse suscipit tincidunt pellentesque. Vestibulum viverra hendrerit nibh, eu euismod felis viverra vitae. Proin at rhoncus mauris. Mauris porttitor ipsum nec sagittis sodales. Integer convallis tellus elit, ac congue arcu consectetur non.

Suspendisse id rutrum diam. Maecenas suscipit dapibus dui imperdiet mattis. Nunc dapibus velit ac tincidunt dictum. Sed mollis lectus nisl, cursus viverra nisi lobortis id. Phasellus et mi a augue pharetra placerat. Praesent eu sagittis dolor. Pellentesque id metus vulputate, fermentum augue at, commodo eros. Duis ac erat scelerisque, bibendum sapien finibus, accumsan ipsum. In semper gravida mauris at pretium. Maecenas mi nibh, eleifend vitae purus quis, pharetra vulputate ex. Quisque viverra pellentesque commodo.
<p>Some text some text some text.</p>
he
w
w
w
</div>

</body>
</html>

When the html is used, there is a gap at the bottom, and i want the floating div to take up the space, leaving no gap

what my end goal is: make CSS bottom nav bar, with no space at the bottom making everything fit inside <div class="main">

Nayr438 · August 29, 2021

29 minutes ago, QQ_cazo said:

what my end goal is: make CSS bottom nav bar, with no space at the bottom making everything fit inside <div class="main">

I don't understand what your after here, If you want it to fit inside main at the bottom, then why not just put the div inside main at the bottom?

Floating elements can't be fully aware of other content on the page without introducing scriptable stylesheets or utilizing javascript.