What happens when CSS min-height is set to 100% and there are fixed elements on the screen as well

I've been grappling with the min-height:100% CSS property in an attempt to make my content area reach the remaining % of the screen, but it's proving to be quite challenging. Any guidance you can provide will be highly valued.

On my page, I have 3 fixed height divs placed at the top and 1 fixed height footer at the bottom. In between these, there's a div known as the "container" div where the dynamic height section is located. Here, I want both the content and sidebar divs to extend to a minimum of 100% of the screen height and adjust based on the content length.

Link to related code snippet: http://jsfiddle.net/P3Ckk/110/

Any assistance or advice would be greatly appreciated as I'm currently stuck at this point.

htmlexpandcss

Answer №1

Your #conatinerWide is currently set with a gray background, but it seems like you want it to expand and fill the remaining space.

The issue lies in the fact that html and body will only grow as large as the content within them. By setting them to 100%, you are instructing them to fill the entire document window, allowing your #containerWide to take up 100% of the available space.

To achieve this, add html, body { height: 100%; } to your CSS.

If you want every element to have a min-height:100%, you need to set the height:100% on the parent element. So, #containerWide should have height:100% and #container should have min-height:100%; height:100%.

You can continue making adjustments using this pattern for other elements like #exsi and #cont following the same logic.

Here is an updated version of your code with these changes:

http://jsfiddle.net/rtgibbons/P3Ckk/113/

In summary, I've applied min-height:100%; height:100% to all parent elements, moved #foot out of #container, and adjusted margins to ensure everything fits correctly.

There are two things to note:

  1. Applying padding with 100% was causing some elements to expand past #containerWide, so you may need to adjust or wrap them in another container.
  2. The footer may appear below the visible area due to positioning; you may need to address this depending on your layout requirements.

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 pair of div containers arranged in rows

I currently have 9 different div containers, each with unique styling for spacing and padding. My goal is to arrange these div cards into 2 rows with sufficient spacing between them for easy readability. As of now, I have all the div containers stacked in ...

htmlcssbootstrap-4

IntelliJ automation in Java does not allow clicking the button

Currently, I am on the PayPal page and I need to automate clicking the agree button. <form id="ryiForm" class="proceed ng-pristine ng-valid" ng-class="{true: 'validated'}[validated]" ng-submit="confirm.$valid && onPay()" novalidate= ...

javacssintellij-ideaselenium-webdriver

Arrange images/divs horizontally beside each other without specifying the width of the container div

Check out my code snippet <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> #image_container { position:absolute; top:100px; left:0px; he ...

htmlcss

"Upon invoking the console log, an empty value is being returned when attempting to access the

Why is console.log returning a blank line when trying to retrieve the value of a text input variable? HTML <label for="subject">Subject</label> <input type="text" id=" ...

javascripthtmlforms

Discovering the most recently selected element in jQuery

Currently reading a jQuery tutorial from the Head First series and practicing with an example where I need to identify the last selected element. In Chapter 2, there is a task involving four images on a page. When a user clicks on any of these images, the ...

javascriptjquerycss

What are the best ways to expand image mapping?

It can be a bit challenging, but I'll do my best to explain. I have an image that is sized at 1920 by 1080 pixels and it adjusts based on the window size. The issue arises when the image mapping doesn't adjust accordingly. The coordinates remain ...

htmlcssimagemap

Changing Content Dynamically in Adobe Muse

I'm in the process of creating a website for an internet radio station and I've chosen to use Adobe Muse due to its user-friendly design features. My goal is to have the header and footer sections stay static while only the content on the page ch ...

htmldynamicmuse

Resetting the quiz by utilizing the reset button

Hello everyone, I'm new to this platform called Stack Overflow. I need some help with my quiz reset button. It doesn't seem to be working as intended. According to my code, when the reset button is clicked at the end of the quiz, it should bring ...

javascripthtml

Is there a method to display text on the screen after a countdown has finished?

I am looking for a way to display some text or an image of a cake on the screen once this countdown reaches zero. It's a countdown leading up to my birthday, and I really want it to have that special touch at the end. However, I've been strugglin ...

htmlcountdown

`Incorporating JavaScript for Menu Navigation on the Homepage: Challenges Ahead`

I am attempting to modify the HTML link within the Javascript on the thank you page, but my attempts to change all respective pages' HTML links to index.html/javascript:goTo(XXXX) have been unsuccessful. How can I successfully alter the link to conne ...

javascripthtml

The Bootstrap navbar toggle is unresponsive and will not expand

I want to implement a Bootstrap navbar to expand the webpage when it is opened on a mobile phone. Below is the code snippet of how I have used Bootstrap in my HTML file: <html> <head> <link rel="stylesheet" href="https://cdn.jsdeliv ...

htmlcssbootstrap-4

Transitioning the image from one point to another

I am currently working on a unique single-page website and I have been experimenting with creating dynamic background animations that change as the user scrolls. Imagine my website is divided into four different sections, each with its own distinct backgro ...

javascriptjquerycss

Combining two CSS classes to create an "alias"

Currently, I’m utilizing bootstrap for table styling. For instance: <table class="table table-striped main"> However, the table I want to style is dynamically generated by a separate tool that I have no control over, and it already has its own ta ...

htmlcss

Step-by-step guide on crafting a harmonious row of a label and a responsive button group

One of my projects involves a form that contains a list of elements. I want this form to be responsive and suitable for all screen sizes. When I initially run the project on a larger screen, everything looks good. However, when I resize the screen to a sma ...

htmlangulartypescript

Any particular reason for Bootstrap v5 switching class names from .ml .mr to .ms .me?

I'm curious if anyone can explain the reasoning behind Bootstrap v5 changing the names of classes that are widely used? ...

cssbootstrap-4bootstrap-5

Is there a way to obtain HTML code within a contentEditable DIV?

When working in a contentEditable-DIV, my goal is to extract the HTML code from the starting position (0) to the end position where the user has clicked. <div id="MyEditableId" contentEditable="true"> 1. Some text 123. <span style="background-c ...

javascriptjqueryhtmlcss

Adding new fonts to an Angular 2 web page

I am working on an Angular 2 application and I want to incorporate wrapbootstrap. However, I am facing an issue with the fonts (bootstrap, font-awesome, google) and I am not sure how to include them. While using the css file for wrapbootstrap, I am gettin ...

cssfontsangular

Could the absence of an external style sheet for CSS be hindering the execution of my code?

A generous Stack Overflow user provided me with the code you see here and their JSFiddle can be accessed at http://jsfiddle.net/f18513hw/. The code functions properly in JSFiddle. I copied and pasted the code into my Textpad, saved it in my htdocs folder o ...

javascriptjqueryhtmlcss

My website is experiencing issues with the inner border being transparent and not displaying correctly

I have encountered an issue where the inner border only appears transparent on a single page or JSFiddle, but for some reason it is not working on my website. Can anyone offer any assistance on what might be causing this problem? The border is displaying ...

javascripthtmlcss

Ways to modify the font style of Python comments in JupyterLab's code cells and code editor:

Many resources discuss how to change font families for all content, but I am seeking guidance on making syntax-specific changes. For example, I would like to switch the font style of Python comments from italic to normal. Can anyone offer assistance? Thank ...

pythoncssjupyterjupyter-lab