Header causing issues with 100% height div container on the webpage

Check out http://jsfiddle.net/oedev/pag7ahz2/

This is the layout of my page:

  • cMain - main container for the page
  • cBanner - container for the banner
  • cNavigation - container for navigation
  • cContent - container for page content

All these containers are set at a size of 100%, except for the banner.

html, body {
    height: 100%;
}

#cMain {
    height: 100%;
}

#cBanner {
    background: #002d62 top center no-repeat scroll;  
    height: 200px; 
    margin-bottom: 1em; 
    margin-top: 1em;    
}

#cContent {
    height: 100%
}

I have specified the height of the html, body, and divs to be 100%.

However, due to having a header logo and navbar, the div below them is not being stretched to 100% (resulting in a scrollbar).

If I remove the header and navbar divs, the content div stretches to 100% without any scrollbars.

htmlcsstwitter-bootstrap

Answer №1

Get rid of the body tag's height specification.

html {
    height: 100%;
}

Alternatively, you can set a minimum height for the body element as demonstrated in this helpful resource: Set Minimum Height for Body Element

html {
    height: 100%
}
body {
    min-height: 100%;
}

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

"Learn the trick to concealing a modal and unveiling a different one with the power of jquery

Whenever I try to open a modal, then click on a div within the modal in order to close it and open another one, I encounter an issue. The problem is that upon closing the first modal and attempting to display the second one, only the background of the seco ...

javascriptjqueryhtmlcsstwitter-bootstrap

Discovering a locator based on the initial portion of its value

Here's a piece of code that is used to click on a specific locator: await page.locator('#react-select-4-option-0').click(); Is there a way to click on a locator based on only the initial part of the code, like this: await page.locator(&apos ...

javascripthtmltypescriptplaywrightpartial

Incorporating a hyperlink within a confirmation return statement

Looking to include a link within a return confirmation <a onclick="return confirm('Make sure you've read our policies before downloading the App');">[...] The policies should be clickable at the end. ...

javascripthtmlpopuphref

Printing specific div content from an HTML page using a print button

I have a situation where I need to control the printing functionality of my HTML page. Currently, I have two div tags in my code with a single print button at the top of the page. When I click on this button, it prints the content from both divs. However ...

htmlcss

Is there a way to partially conceal the H2 text using CSS?

Is there a way to partially hide H2 text using CSS? I have the following code: HTML: <div class="twocol-box1 superflex-content-6-12"> <h2 data-content="My - Text&amp;nbsp;<span style=&quot;float:right;&quot;>M ...

htmlcss

The search filter on the bootstrap card failed to display the intended image

When I am searching for a specific image by name, the rest of the row's name keeps showing up. However, I only want to display the data relevant to my search. See the image below: Display: Select all data from the database. <?php $checkQuery = &qu ...

phphtmlcssanimation

Personalized VueJS Counter

Just started learning VueJS and I've encountered a challenge while attempting to build a custom counter. Here is the code snippet: <template v-for="(ben, i) in plan.beneficios"> <div class="w-80 w-90-480 m-auto pa-hor-5-480" :class= ...

javascripthtmlvue.js

Change the height of textarea dynamically using jQuery

I am trying to create a comment box similar to Facebook's, where it resizes as text fills it using Expanding Text Areas Made Elegant This is how my view looks: <div class='expandingArea'> <pre><span></span></ ...

javascriptjqueryhtmlajax

adjusting label widths using jQuery mobile

I am currently using jQuery mobile to develop my user interface, however I am facing an issue with adjusting the width of my labels. Can anyone provide guidance on how to set the width of all my labels to 108px? http://jsfiddle.net/GZaqz/ Check out the c ...

htmljquery-uicssjquery-mobile

Troubleshooting Issue: jQuery Hide/Show Functionality Not Behaving as Expected Inside If

Trying to create a jQuery slideshow but encountering some difficulties. The issue lies with a variable that should hide or show images based on the navigation buttons pressed. However, only img1 is showing and none of the other images are displaying. Des ...

javascriptjqueryhtml

Suggestions for autocomplete in a textarea within an HTML element

<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/autocomplete/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> ...

javascriptjqueryhtml

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

What is the best way to loop through all the tags within a div element?

As a beginner in using BeautifulSoup, I am currently exploring the following HTML segment: <div class="jpag" id="srchpagination"><a rel='prev' class="dis"><span>&lsaquo;&lsaquo;</span> Prev</a><span class ...

htmlpython-2.7beautifulsoup

Several Divs Positioned on Different Pages with Backgrounds That "Scroll"

Currently utilizing: jQuery Mobile 1.4.5 I am interested in knowing if it is feasible to achieve the following, and if so, how to start working on it. At the moment, there are 4 page divs that utilize swipe for navigation between them with a horizontal t ...

jquerycssjquery-mobile

Tips for creating a highly adaptable code base- Utilize variables

Can anyone help me optimize this lengthy and cumbersome code in HTML and JS? I want to make it more efficient by using variables instead of repeating the same code over and over. In the HTML, I've used href links to switch between different months, w ...

javascriptjqueryhtmloptimization

My images seem to lose control and go completely wild when I try to turn them into hyperlinks

Seeking advice on why my social icons are behaving strangely. This is a new issue for me and I suspect that some other CSS is causing the problem, but I can't seem to locate it. I want to ensure that the formatting of these images remains consistent ...

htmlcssanchor

When using Angular 5's ngModel, the user interface displays the updated value dynamically without requiring the

When filling out my form, I encounter an issue with a select element and a bind variable. If I make a change to the value and save it, everything works as expected. However, if I make a change in a modal window but then close the modal without saving the v ...

htmlangulartypescript

Unable to enclose an element with an HTML structure

I am attempting to take all the elements marked with the table tag and envelop them in an HTML structure to make the tables responsive. However, it appears that my current approach is not yielding the desired results. Can you please provide some insight ...

javascripthtmlangulartypescriptdom

Transformation and swapping between two distinct visuals

In this scenario, there are two images: a boat and a plane. The specific effect desired is as follows: The boat should animate from left to right, while the plane remains hidden. Once the boat reaches the middle of the screen, it should disappear and the p ...

htmlcsscss-animations

Store text in a table format in your local storage

I need help figuring out how to save product and price information to local storage when an "add to cart" button is pressed. Can someone provide guidance on how to do this? Here is the code I currently have: body> <!-- Header--> ...

javascripthtmljquerycsslocal-storage