Tips for making a stretch height block using CSS

Hello! Can anyone assist me with CSS styling without involving JavaScript?

I am looking to set up the main block with a fixed or variable height, based on a percentage of its parent container, not the window height.

<div class="main" style="height: 1337px;">

  <div class="foo">
    Display this block in the regular manner
    (without a fixed height)
  </div>

  <div class="bar">
    Ensure that this block occupies the full height
    (bar = main - foo - foo)
    regardless of its content
  </div>

  <div class="foo">
    Display this block normally
    (without a fixed height)
  </div>
</div>

Answer №1

To achieve the desired layout, consider using display: table and display: table-row. Keep in mind that IE7/8 may not fully support this method.

Update: Based on information from can I use..., it seems that IE8 does support this, making it a viable option to implement.

For a working example, check out this JSFiddle demo.

An alternative approach could be to use flexbox, although it is still in the draft stage and lacks adequate browser support at this time.

Answer №2

Is this the kind of layout you were looking for?

<div class="container" style="width: 100%; height: 800px;">

  <div class="section1" style="min-height:50%; background-color: lightblue">
    This section will adjust its height based on content
  </div>

  <div class="section2" style="height: calc(50% - 50px); background-color: lightgreen">
    This section will always take up half of the remaining height
  </div>

  <div class="section3" style="min-height:50%; background-color: lightcoral">
    This section will also adjust its height based on content
  </div>
</div>

Answer №4

Specify the minimum height for the bar element and eliminate the height from the main element. It seems like you are looking for something along these lines

html:

<div class="main">

  <div class="foo">
    This section should be displayed normally
    (without fixed height)
  </div>

  <div class="bar">
    This section should take up full height
    (bar = main - foo - foo)
    regardless of the content inside it
  </div>

  <div class="foo">
    This section should be displayed as usual
    (without fixed height)
  </div>
</div>

css:

.main{
       border:1px solid #000;
        position:relative;
    }
    .foo{
        background:#0000ff;
    }
    .bar{
        background:#00ff00;
        min-height:500px;
    }

working code: Demo

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

Steps to redirect to an external page after successful login, even if it's not hosted on the server

I have developed an HTML5 app on my phone. Once the correct username and password are entered, the app is supposed to connect to an external server, authenticate the credentials in the database, and then redirect me to another page (Home Page) within the a ...

Issue with CSS File not being recognized by React Component

After using the webpack create-react-app with npx, I encountered an issue with my component styling. Despite having a CSS file named header.css in the src directory alongside Header.js, my component does not seem to be styled correctly. Here is how my comp ...

How can a single value from one table be allocated to multiple values in another table?

There are 3 distinct tables that I am working with: process table: | projectNo | process | studio | +-----------+---------+--------+ | 170001 | ANM BLD | APEX | | 170001 | ANM BLD | CANVAS | | 170002 | CGI MOD | APEX | | 170003 | CGI MOD | ...

Manipulating background scrolling using jQuery

I had a vision of creating a logo with PNG transparency and a scrolling background that would give the appearance of being made in Flash. To achieve this effect, I utilized the jquery.backgroundPosition.js plugin for enabling background scrolling. Here is ...

Methods for presenting a list of textboxes representing a price list when a checkbox is clicked using CSS

When updating the supplier and store, the item list dynamically populates. When a user clicks on an item they want to order, how can I display the quantity textbox to the left of the checkbox using CSS? Below is the code snippet for items and ordered quan ...

ASP.NET Core MVC: Issue with Passing C# Razor Variable to HTML Tag

GitHub Repo: https://github.com/shadowwolf123987/Gun-Identification-App I'm currently facing an issue in passing the values of two C# variables from the code block defined in my view to the corresponding html tags within the same view. Unfortunately, ...

Navigating Google GeoChart Tooltips using Google Spreadsheet Data

My objective is to create a custom GeoChart for the company's website that will display data specific to each state in the US region based on team member assignments. The GeoChart should color states according to which team member helps that state&apo ...

Change elements in real-time

I have a requirement to adjust elements with the class .super-elem by adding an attribute adjusted="true". Initially, I can easily achieve this within the document's ready event : $(".super-elem").attr("adjusted", "true"); However, I may add more . ...

Exploring the options available for setting types in Angular-formly

While using setType to create a new type in angular-formly, how can I show the options in the template? I am trying to create a type called "category" that will display the label on the webpage. How can I retrieve the label name? This is what my code loo ...

Can the first row of a flex-box begin in the second column and end in the third column?

Can a layout be created with two rows and three columns without adding any extra elements using the flex property or any other method? .parent{ display:flex; flex-direction:column; } .child1{ background:lightblue; } .child2{ display:flex; border:1px ...

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

division of vertical space

Is there a way to ensure that the column containing bbb + ccc is the same height as the aaa and ddd columns? <html><body> <div style="width:500px;height:500px;background-color:yellow"> <div style="float:left;height:100%;background-co ...

Create a circular modal for the design

I am interested in creating a modal that has a circular shape instead of the typical rectangle with rounded corners. This means it should appear as just a simple round container with the modal-body content in the center, without any modal-header or modal-f ...

Place an <a> hyperlink on top of an <img> element with adaptive responsiveness

I'm working on a React application and I want to overlay multiple links using <a> tags on top of an image <img>. Initially, this seemed easy but I ran into an issue - when the window is resized (on different devices, for example), the posi ...

Removing asp:FileUpload components will cause jQuery File Upload to malfunction

After successfully updating an old form to a new version, I encountered an issue with the old FileUpload tag. Transitioning to the jQuery Multiple File Upload Plugin for a more modern style has been smooth sailing, except that deleting the old FileUpload e ...

Animate the jQuery menu to slide both upwards and downwards, as well as shift the inner divs to the right

I'm facing a jquery issue and could use some assistance. I am trying to achieve the following: Add a class "active" to style tags when they are active. Slide up/down vertically within a div (#information - containing "About" and "Contact"). Slide le ...

Guidelines for aligning input buttons at the center of an HTML form

My form contains multiple input buttons, however, the inputs are not centered on the page. Currently, they are displayed in a single row within the div. I would like them to fill the page width with a 20px margin on each side and adjust to the browser scre ...

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

Tips for making a sidebar sticky when scrolling

In order to keep the right-side bar fixed, I have implemented this javaScript function: <script type="text/javascript> $(document).ready(function () { var top = $('#rightsidebar-wrapper').offset().top - parseFloat($('#rightsideb ...

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Any recommendations on how to specifically code the styles for portrait orientation solely on the Kindle Fire device? ...