How do I make the columns end at the footer instead of going through them? In the preview, you can see some of the last images being covered up by the footer.
Is it because the footer is fixed-bottom?
Do I need to set the height of the 2 columns to x-footer height? Any help would be appreciated
using bootstrap 5.3.0 alpha-1
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
window.onload = (event) => {
const tooltip = bootstrap.Tooltip.getInstance('#add_bot_button') // Returns a Bootstrap tooltip instance
tooltip.show();
};#navbar_wallet_address {
list-style-type: none;
}
#navbar_wallet_address a ul li {
list-style-type: none;
}
#sidebar {
height: 100vh;
max-height: 100vh;
background: lightgreen;
}<!doctype html>
<html lang="en">
<title>discord dashboard -- TEST</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/NEW_DISCORD.css') }}" />
<div style="overflow-y: hidden; height: 100vh;">
<div >
<nav id="sidebar">
<!-- sidebar header -->
<div style="text-align: center; align-items: center;">
<h4>
Sidebar Header
</h4>
</div>
<div style="align-items: center; border: 1px solid black;">
<ul id="owned_guilds_list">
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br> <li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br> <li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
</ul>
</div>
</nav>
<div style="background: lightyellow; height: 100vh;">
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
</div>
<nav >
<div >
<!-- <a href="#">Fixed bottom</a> -->
<div >
<a href="#" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom- data-bs-title="Tooltip test 1234">
Button 1
</a>
</div>
<!-- <div > -->
<div >
<a href="#" id="add_bot_button">
Button 2
</a>
<a href="#" id="add_bot_button">
Button 3
</a>
</div>
<div >
Username
</div>
</div>
</nav>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='script/NEW_DISCORD.js') }}"></script>
<!-- <script type="application/javascript" src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script> -->
</html>CodePudding user response：
You have the viewport height set to 100 which is partially obscurred by the footer.
You can tell the sidebar and main divs to only occupy the space that is not covered by the footer.
Change the height: 100vh in your divs to height: 94vh.
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
window.onload = (event) => {
const tooltip = bootstrap.Tooltip.getInstance('#add_bot_button') // Returns a Bootstrap tooltip instance
tooltip.show();
};#navbar_wallet_address {
list-style-type: none;
}
#navbar_wallet_address a ul li {
list-style-type: none;
}
#sidebar {
height: 100vh;
max-height: 100vh;
background: lightgreen;
}<!doctype html>
<html lang="en">
<title>discord dashboard -- TEST</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/NEW_DISCORD.css') }}" />
<div style="overflow-y: hidden; height: 94vh;">
<div >
<nav id="sidebar">
<!-- sidebar header -->
<div style="text-align: center; align-items: center;">
<h4>
Sidebar Header
</h4>
</div>
<div style="align-items: center; border: 1px solid black;">
<ul id="owned_guilds_list">
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br> <li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br> <li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
<li >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 50px; width: 50px;">
</li>
<br>
</ul>
</div>
</nav>
<div style="background: lightyellow; height: 94vh;">
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
</div>
<nav >
<div >
<!-- <a href="#">Fixed bottom</a> -->
<div >
<a href="#" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom- data-bs-title="Tooltip test 1234">
Button 1
</a>
</div>
<!-- <div > -->
<div >
<a href="#" id="add_bot_button">
Button 2
</a>
<a href="#" id="add_bot_button">
Button 3
</a>
</div>
<div >
Username
</div>
</div>
</nav>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='script/NEW_DISCORD.js') }}"></script>
<!-- <script type="application/javascript" src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script> -->
</html>CodePudding user response：
Because the footer is fixed, it's being positioned relative to the viewport. I would suggest you apply some css to the content that is being covered
covered-content {
margin-bottom: //height of footer;
}
if you have a dynamic footer you can use some javascript Element.clientHeight to get the computed footer height.