Encountering a vast expanse of empty white void

Attempting to create a scrollbar within my content div instead of the entire window seems to be causing a large white space in the content box, and I'm struggling to understand why. Can someone take a look and help me identify the issue?

You can view my site here: www.rajohan.no/index.php?page=movie&category=comming

Another problem I'm facing is that the scrollbar extends under the footer. Is there any way to make it stop at the beginning of the footer?

I am using overflow: hidden; on the body and then overflow-y: auto; in my content div

Below is my jQuery script to determine if a scrollbar is necessary:

// Check if content_box needs a scrollbar
function calculateDivHeight() {
  $("#content_box").height(window.innerHeight);
}
$(window).resize(function () {
  calculateDivHeight();
});

Answer №1

Your 'content_box' element now has a height of 100% of the page, and you have positioned your footer with CSS as fixed. This is causing the issue because the footer is coming before the content box. To solve this, consider setting the height of the content_box to 75vh, the footer to 20vh, and the header to 5vh, allowing all elements to fit on the screen without needing a fixed footer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a unique local storage cache mechanism for AJAX requests in jQuery

Recently, I attempted to develop a personalized caching system for my ajax requests, primarily focused on data retrieval. Instead of storing the information in the browser cache, I decided to store it in localStorage for prolonged accessibility. However, ...

What is the best way to have an image fill the remaining space within a 100vh container automatically?

I have a container with a height of 100vh. Inside it, there is an image and some text. The text's height may vary based on the screen size and content length. I want the text to occupy its required space while the image fills up the remaining availabl ...

Failure to Load Data Using AJAX Request

I'm currently working on validating the entered username and email by checking them against the database for availability. The email validation is working perfectly. I'm using similar code for the username, just with different id tags: Below is ...

Definition of a jQuery plugin

There's an aspect of the traditional jQuery plugin definition that remains elusive to me, and it seems that no tutorial on plugins addresses this issue. Many plugin definitions I've come across follow a pattern similar to this: (function($) { ...

How to effectively combine css() and delay() in jQuery?

fid: https://jsfiddle.net/k13sazuz/ Is there a way to create a delay chain for CSS rules using jQuery? $('.two').css('background','blue').delay(11800).css('background','red'); ...

Element is not perfectly aligned with the bottom; Slightly below the bottom edge

Why does an element positioned absolutely within a div that has relative positioning end up slightly lower than the bottom of the parent div? What can be done to fix this issue without just adjusting the bottom value on .hoverAction? function showFileUp ...

Creating a Smooth Curve with CSS

Recently, I've decided to create a unique clock design inspired by the one showcased here. However, instead of using images like they did, I would like to implement ARC. Is it possible to create an arc using only CSS? For instance, if I wanted to make ...

What is the best way to input an HTML element into AngularJS code?

I am looking to integrate the html element into my angularjs code. Within my HTML, I have elements such as data-form-selector='#linechart_general_form' and data-url="{% url 'horizon:admin:metering:samples'%}" that I need to access withi ...

What is the best method for converting a string picture URL into an image and showcasing it in an image tag?

I have a URL for an image that looks like this: C:\inetpub\MaujApp\OMSAPI\ManualReceivingImages\WhatsApp Image 2021-03-24 at 12.07.41 PM.jpeg My goal is to convert the original image and display it to the user using jQuery. I woul ...

Choose the option in real-time with Jquery

I'm currently developing a dynamic HTML for Select Option as seen below: item += "<td class='ddl' style='width:40%;'>"; item += "<select>" item += " <option id='list' name='selector' value=" + se ...

Endless loop of jquery textbox focus event

Currently, I am employing jQuery for validating textbox values. I have two textboxes - txt1 and txt2. For this purpose, I have created a jQuery function: $("#txt1").blur(function () { if ($("#txt1").val() == "") { $("#scarrie ...

CSS3 Animation displaying text color change on various elements in a continuous loop

I was attempting to create a dynamic animation where multiple texts change color, similar to what you can see on https://vercel.com. I have successfully figured out how to make one text change color using keyframes, but I am struggling to make each text ch ...

Unique Text: "Personalized marker/pin for interactive map feature"

Looking to create a custom image map marker/pin with a unique bottom design resembling a union shape using CSS and Vue.js. I've attempted it myself but haven't been able to achieve the exact look as shown in the reference image. Any advice or ass ...

Enable a button or class to dynamically alter its color

Hi there! I'm new to coding and just started learning HTML and CSS. My question is: How can I change the color of buttons once they are clicked? <div class="icon-bar"> <a href="#"><i class="fa fa-search" ...

Sending a form with checkboxes via AJAX

Currently, I am working with Laravel 4 and have a form that includes a list of departments along with their respective members. To organize this information, I decided to implement an accordion feature wherein all members are grouped under a particular dep ...

Dealing with Memory Leaks in AngularJS and Jquery

My web application has been created with a combination of jQuery and Angularjs. I am currently on the lookout for patterns that could lead to memory leaks in Angularjs. I have used Chrome profiler as a tool to find memory leaks, but unfortunately haven&a ...

Creating the CSS styles for input fields

Here is an example of a form: <form class="mystyle" ...> <input name="test1" type="text"> <input name="test2" type="text"> ... </form> I want to apply CSS styling to all the input elements in this form: .mystyle input[type="text" ...

Is it possible to rotate just the camera in ThreeJS by dragging the mouse within the scene?

Currently, I am involved in a project using ThreeJS and I am looking to implement camera rotation using the mouse. Although I have come across OrbitControls that allow me to rotate the camera around a point or object, I am unable to achieve the camera rota ...

What is the best way to retrieve the first item in owl carousel's content?

I need help creating a slider with two sections: top and bottom. My goal is to display the content from the bottom slider on the top slider. I tried adding a class to the first item element, but it didn't work. If anyone knows how to target the first ...

Instructions for integrating AJAX into a PHP script

I am looking to incorporate AJAX into my PHP file so that when I delete an item from a list, the data automatically reloads and the list is updated with the new information. I have created a list of all my data along with a delete button. Below is the PH ...