Я хочу создать липкую нижнюю панель инструментов, которая всегда остается внизу. Это всегда должно быть видно на экране. Я пытался использовать position: fixed, bottom: 0, что определенно помогло, но оно перекрывает мой контент. Вот как оно перекрывается (посмотрите внизу страницы):
Да, я понимаю, что оно должно перекрываться, но проблема в том, что Я не могу прокрутить вниз, чтобы увидеть оставшийся текст.
Вот мой код:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.bottom-toolbar {
position: fixed;
bottom: 0;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="article">
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
</div>
<div class="bottom-toolbar">
<p> My toolbar </p>
</div>
</div>
</body>
</html>
Как я могу решить эту проблему?