Make the content box 100% height, but if the content is only a few lines, it should not require scrolling

I have five different div boxes on my website: wrapper, header, navigation, content-title, and content. The height of the header and navigation sections is fixed, while the content should always stretch to the bottom of the webpage. However, I am experiencing an issue where a vertical scrollbar appears regardless of the amount of content in the content div. Even if there is only a small amount of text, the scroll bar still shows up.

My goal is for the scrollbar to only appear when the content within the content div exceeds the space available on the webpage.

You can see a demo of this issue here:

1) Website with minimal content:

2) Website with extensive content:

Example 1 shows the incorrect behavior as I do not want the scrollbar due to the limited text content. Instead, I want the content div to reach the bottom of the webpage. Example 2 demonstrates the correct behavior where the scrollbar appears because the text content is longer.

htmlcssheightoverflowcontainers

Answer №1

Your question is a bit unclear to me, but if you're looking for a scroll to only appear when the content exceeds the container size, you can use the CSS property overflow: auto.

Check out this example demonstrating how it works: http://jsfiddle.net/tnh9M/

UPDATE

After reviewing your updated question, I see where the issue lies. It seems like removing the height: 100% from #content_box_background will prevent the body from overflowing. If you want it to reach the bottom of the page, consider calculating the height minus any top offset you've defined, such as height: calc(100% - 400px);

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

A guide on using jQuery to iterate through 3 separate div elements

Seeking assistance with creating a dynamic loop for multiple divs (3 or more) using jQuery. The desired outcome is to have the main image div on the homepage rotate with other divs, changing both the background image and links within each div. I initially ...

javascriptjqueryhtmlcss

Tips for creating a table that fills the height of its parent div without surpassing it

Issue: I am facing a challenge with making a <table> element fill 100% of its container's height dynamically, without going over the limit. Context: When the height of the <table> surpasses that of the container, I want the ability to s ...

htmlcsshtml-table

Using AngularJS to link ng-include in an ng-view HTML file

Currently, I am diving into AngularJs while also investigating the creation of a viral movie website for the new x-men film. The site in question is Trask Industries (http://www.trask-industries.com/#/innovation), where the navigation system seems to dynam ...

javascripthtmlangularjstemplatesng-view

What could be causing the text in the sidenav to vanish when the screen width reaches a specific size?

Disclaimer: This website is my first attempt at development, so I tend to make minor errors that can be hard to catch. The sidebar and submit button remain intact, but the checkboxes and their labels disappear when the screen size is reduced below a certai ...

htmlcssbootstrap-4

Having trouble with JavaScript in a project I'm trying to replicate

For my coding practice, I am working on a project where clicking on the images should change the main product displayed along with its color. However, nothing happens when I click on the products. Can anyone point out what I might be doing wrong? Here is ...

javascripthtmlcss

Node.js web application encounters ECONNRESET and MongoNetworkError issues

Currently working on a website with Node.js, Express, and MongoDB (MLAB). The code is too long to post here. When I try to access my index page, app.get("/alumniport", (req, res) => { alumni.find((err, theAlumni) => { if (err) { res.redi ...

htmlnode.jsmongodbexpress

The PHP include function seems to be failing to insert my PHP file into the webpage

When attempting to include the tabnav_Browse.php page, located in the includes directory, and the Browse_Page1.php file, located in the Browse directory, by adding this code to the <?php include ("../includes/tabnav_Browse.php"); ?>, nothing is displ ...

javascriptphpjqueryhtmlajax

What are the key differences between using role and class selectors in HTML 5 and CSS3 to create two sidebars with three

My decision to eliminate all ids from my CSS and transition to HTML 5 has led me to question the use of roles in markup. In the past, IDs were used to style sidebars individually within a single selector for both. Here is an example: <div id="sidebar" ...

htmlcssselectorsidebarrole

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections. Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, ...

javascriptjqueryhtmlcss

Contrasts between space and the greater than selector

Can you explain the distinction between selector 6 and selector 7 as outlined on the w3 website? Inquiring minds want to know. ...

htmlcss

What could be causing these transformed canvases to not display fully in Chrome at specific resolutions?

fiddle: https://jsfiddle.net/f8hscrd0/66/ html: <body> <div id="canvas_div"> </div> </body> js: let colors = [ ['#000','#00F','#0F0'], ['#0FF','#F00','#F0F&a ...

javascriptcssgoogle-chromehtml5-canvas

Having trouble getting the Java applet to function properly on my HTML page

Currently, I am in the process of learning Java and came across an interesting concept that suggests I can also run my Java code in a browser using an applet. However, when I attempted to do so, an error message popped up prompting me to click for more det ...

javahtmlapplet

Permit the use of the "&" character in mailto href links

When including an email mailto href link and using a & character in the subject, it can cause issues with code rendering. For example, if the subject is "Oil & Gas," only "Oil" may show up. In most cases, you could simply replace the & with th ...

javascriptphphtmlhrefmailto

Ensuring that images are the perfect size for their parent container

Exploring the functionalities of angular bootstrap carousel, I am eager to showcase various images and enable clicking on them. The challenge I'm facing is that my images are not uniform in size and don't fit perfectly within my bootstrap column ...

htmlcssimage

The hexadecimal code for the textured background color of an iOS Scroll View in CSS

Can someone share the specific CSS color code with me? I would like to apply this same color to my website. Appreciate it! ...

ioscssbackground-color

Tips for retaining a chosen selection in a dropdown box using AngularJS

How can I store the selected color value from a dropdown box into the $scope.color variable? Index.html: <label class="item item-select" name="selectName"> <span class="input-label">Choose your favorite color:</span> <select id="colo ...

javascriptangularjshtmlselectionic-framework

Vanish and reappear: Javascript block that disappears when clicked and shows up somewhere else

My goal is to make three squares randomly disappear when clicked on the page. However, I am facing an issue where some of them, usually the 2nd or 3rd one, reappear elsewhere on the page after being clicked. I have created a jsfiddle to demonstrate this: ...

javascriptjqueryhtmlcss

Change the text of a button by using an input field

How can I dynamically update button text based on input field value? <input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field"> <button id="rzp-button1" class="paynowbutton w-button">Pay Now</button> I want the bu ...

javascriptjqueryhtml

What is the best way to modify the width of an option box separately from the select width using jquery?

Is there a way to adjust the width of an option box separately from the select width? Here's what I've tried: $('option').css({'width': 100}); The select element needs to have a width of 400px; select{ width:400px; } Link ...

javascriptjquerycssselect

Using the input method in JavaScript cannot extract an object property

Recently, I have been working with this JavaScript code provided below. It is essential for me to retrieve the votecount for a game based on user input. function Game(gamename,votes) { this.gamename = gamename; this.votes = votes; }; var lol = ne ...

javascripthtmlvariablesobject