This outlines the issue at hand:
My goal is to extend the sidebar to cover the remaining height of the viewport, ensuring that the footer remains visible at all times, regardless of the varying height of the bootstrap 4 navbar. Is there a solution for achieving this?
In other words, I am looking to prevent the sidebar from scrolling while allowing only the content area to be scrollable.
To ensure that your sidebar footer element remains visible at all times, include the following style: .sidebar h3.mt-auto
.sidebar h3.mt-auto {
position: sticky;
bottom: 0;
}
If you're open to utilizing a grid layout, here's a suggestion:
.main
{
display: grid;
grid-template-columns: 10rem 1fr;
grid-template-rows: 56px 1fr;
position: relative;
}
.main > *
{ box-sizing: border-box;
}
#nav
{ grid-column: 1/3;
grid-row: 1/2;
}
.sidebar
{ grid-row: 2/3;
grid-column: 1/2;
height: 100vh;
position: sticky;
left: 0;
bottom: 0;
top: 0;
}
.content.flex-fill
{ grid-row: 2/3;
grid-column: 2/3;
}
It's not perfect, but one consideration is the mention of the "variable height" nav. If you have a fixed height for the nav, you can adjust the .sidebar class by using something like calc(100vh - NAVHEIGHT) instead of a fixed height.
To enhance the styling of the <h3> element containing your footer text, consider adding a class such as sidebar-footer.
Within the CSS section, implement the following code:
.sidebar-footer {
position: sticky;
bottom: 0;
}
After applying this code to the provided link, I observed the changes displayed in this screenshot: https://i.sstatic.net/yb9Yp.png
Kindly confirm if this adjustment meets your requirements!
I am trying to display a picture with a description inline, but I am facing some issues. While I was able to align two pictures using div block:inline, adding a description to the first picture caused it to extend in width (despite setting margin: 0 and a ...
I am faced with a dilemma involving two div elements structured as follows: <div id="left"><p>.....</p><br/> <p>.....</p> </div> <div id="right"><img ..../></div> Accompanied by CSS styling: #l ...
There is a row that I sometimes clone. <script id="SubRow10" type="text/template"> <select id="SubSelect10" class="form-control" name="SubcategorySelect" required> <option value="m,2">Op1</option> <option value="m,3"&g ...
I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type ...
Currently, I am attempting to transfer the value from a textbox to a textarea. However, I am struggling with how to append this new value alongside any existing content in the textarea. $('#firstnametxt').change(function () { $(& ...
I am trying to set up a custom error page (error-404.html) for non-existing files and directories on my website. The goal is to seamlessly redirect users to the error page without changing the URL that they entered. RewriteCond %{REQUEST_FILENAME} !-f Rew ...
I'm currently working on creating a radio list with three options: Salad Spaghetti Ice cream This is how I coded it: <div id="radiobuttons"> <label><input name="vf" type="radio" value="0" checked/>Salad</label> < ...
I'm having trouble auto-focusing an input field when a modal is displayed. Here's what I've tried, but it doesn't seem to be working: jQuery(document).ready(function($) { $('#myModal').on('show.bs.modal', functi ...
Hey there! I've been working with both jQuery's fancyBox for displaying image/video galleries and the Capty script for showing image titles on images. However, I've run into a snag - when the title is displayed on the image, fancyBox st ...
Is it possible to incorporate HTML/Bootstrap elements into a cell in VueJS? <b-table striped show-empty :items="filtered"> <template slot="top-row" slot-scope="{ fields }"> <td v-for="field in fields& ...
I am currently working on a bootstrap accordion with the following structure: <div class="support-accordion"> <div class="accordion" id="accordionExample"> <div class="accordion-item ...
I am having trouble aligning the section properly in the center, and the div does not have a container class. Is there a bootstrap class that can help with alignment, or do I need to create CSS code to align the items in the div tag? <link href="ht ...
In the process of developing a website, I have encountered a challenge. I am creating a platform where users can access another website I am currently working on after they log in. Once authorized, users receive a JWT token which is sent in the header with ...
Hi there, I'm new to jQuery and could use some help. I'm attempting to retrieve specific information like CPU and RAM details from a particular phone model. I've written the jQuery code, but I'm having trouble displaying the RAM and CPU ...
Just starting out with JQuery here. I'm working on a search form that has 16 fields, most of which are textboxes and the rest are dropdowns. Underneath these fields, I have 3 radio buttons. When the first one is selected, certain fields in the form s ...
$(document).ready(function () { var imgixOptions = { updateOnResizeDown : true, updateOnPinchZoom : true, fitImgTagToContainerWidth: true, fitImgTagToContainerHeight: true, autoInsertCSSBestPractices: true, ...
Utilizing the power of vue, I created an immersive h5 page within the application framework. The seamless connection between the page and the app relies on the use of window.JSInterface for communication. My current challenge lies in invoking the JSInterfa ...
I'm having trouble aligning my textboxes with my form in Bootstrap within ASP.NET MVC 4. Despite using the form-horizontal div, my elements are displaying misaligned. How can I ensure that the elements align properly with the labels? <div clas ...
I am currently working with AngularJS and MongoDB. In my MongoDB data, there are some text elements that contain a \n, causing each line to be displayed on a new line based on the occurrence of \n. However, I also want to add line numbers to each ...
There's a peculiar bug I'm encountering which results in extra spacing on the body or html element. This additional space isn't visible within the normal browsing area of most browsers, only becoming apparent when scrolling to the right side ...