Limit the container's height to be no more than the height of the

Seeking input on good and bad practices in CSS/HTML/jQuery, I recently asked a question about determining when it is appropriate to use jQuery to set container dimensions. The responses I received were helpful (view them here).

Realizing that jQuery may not be the optimal solution, I am reaching out for additional insights on this issue.

The structure of my page involves PHP, with a common header across all pages and content dynamically loaded using PHP. Therefore, wrapping the header and div in a single container is not feasible:

include ("header.php");
include ("$lang/$section.php");
include ("footer.php");

The header has a fixed height (100px + 100px margin-bottom), followed by a div that should adjust its height based on screen size: below 768px, it should fill the remaining space, otherwise, have a maximum height of 420px with padding of 100px 0.

This div contains three floated columns that need to occupy the available space within the parent div.

Traditionally, I would utilize jQuery to calculate screen height subtracting header height, margins, and paddings. However, it seems this approach is not recommended for achieving this layout.

In summary, I am looking for a CSS-based method to ensure the div fills the space between the header and bottom of the viewport for screens smaller than 768px, capped at a max-height of 420px. While jQuery offers an easy solution, I am eager to explore a cleaner CSS alternative.

If anyone has suggestions or ideas, I would greatly appreciate your input.

For reference, here is a link to the fiddle containing the code.

Thank you in advance!

Answer №1

If you want to adjust the height of a section using calc() and vh (viewport height), here's how you can do it:

To check the browser support for calc(), visit: http://caniuse.com/#search=calc

For browser support on vh, go to: http://caniuse.com/#search=vh

An example would be setting the height of a section with calc(100vh - 200px), where 100vh represents the viewport height and 200px is the height of the header.

In addition, you can include a media query to limit the height to 420px when the screen height is above 768px.

Try implementing this CSS code snippet:

header { height: 100px; background: #ccc; margin-bottom: 100px;  box-sizing: border-box; }

section { width: 100%; height: calc(100vh - 200px); padding: 50px 0; background: yellow; box-sizing: border-box; }

.col1, .col2, .col3 { float: left; width: 33%; }

.colPadding { padding: 25px; background: blue; }

.cb { width: 100%; height: 1px; clear: both; }

body {
  margin: 0;
}

@media screen and (min-height: 768px) {
  section {
    max-height: 420px;
  }
}
<header>
    This is my header with 100px bottom margin
</header>
<section>
    <div class="col1">
        <div class="colPadding">
            section with padding: 50px 0; and max-height: 420px;
        </div>
    </div>
    <div class="col2">
        <div class="colPadding">
            Column 2
        </div>
    </div>
    <div class="col3">
        <div class="colPadding">
            Column 3
        </div>
    </div>
    <div class="cb"></div>
</section>

Answer №2

Experimented with the CSS3 flex-box model and screen media queries to create a responsive layout. Check out my code snippet.

Instead of using 764px, I opted for 300px in the fiddle (feel free to adjust it as needed for testing purposes).

CSS Styling Applied:

* { box-sizing: border-box; } /* ensure sizing consistency based on borders */
body {
    display: flex; /* utilizing flex for body as wrapping header and section isn't permitted */
    flex-flow: column wrap;
}
header {
    height: 100px;
    background: #ccc;
    margin-bottom: 100px;
    flex: 0 0 auto; /* keeping header size fixed */
}
section {
    width: 100%;
    max-height: 420px;
    padding: 50px 0;
    background: yellow;
    /* fill remaining space */
    flex: 1 1 auto;
    /* allow child columns to take full width */
    display: flex;
    flex-flow: row wrap;
    /* stretch immediate children to maximum possible height */
    align-items: stretch;
}
.col1, .col2, .col3 {
    float: left;
    /* occupy available space */
    flex: 1 0 auto;
}
.colPadding {
    padding: 25px;
    background: blue;
}
.cb {
    width: 100%;
    height: 1px;
    clear: both;
}

/* Additional CSS */
/* styling for screens equal to or less than 300px (modifiable to 768px) */
@media screen and (max-height: 300px) { 
    body {
        height: 100vh; /* set body size to full screen */
    }
    header {
        margin: 0px; /* eliminate bottom margin */
    }
    section {
        padding: 0px; /* remove top/bottom padding and margins */
        margin: 0px;
    }
}

Learn more about CSS3 flex-box here.

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

What is the solution to resolving an Open Quote error message in HTML coding?

Seeking assistance to resolve an HTML code error located at line 9. Fatal Error: Open quote is expected for attribute "{1}" associated with an element type "border". The problematic code snippet is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

Achieve this effect by making sure that when a user scrolls on their browser, 50% of the content is entered into view and the remaining 50%

Is there a way to achieve this effect? Specifically, when the user scrolls in the browser, 50% of the content is displayed at the top and the other 50% is shown at the bottom. ...

Click X button to toggle and close the dropdown menu

After successfully creating a responsive menu that toggles with a hamburger icon at 1205px resolution, I encountered an issue. Once the hamburger icon is clicked and the dropdown menu opens, there seems to be no way to close it. I am looking to add an X bu ...

incorporate partial html into nodeJS & Jade using AJAX requests

Is there a smart method to load just a segment of a page using Node.js and Jade?: I'm in the process of creating a music blog and I want to incorporate a seamless player at the top of each page. The goal is for the player to keep playing without inte ...

Enhancing Images with Dynamic Captions Using JQuery

I have created a code to add image captions to different div blocks, and it works as intended. However, I am looking for ways to optimize the code and make it shorter. If you have any advice on how to improve it, please let me know! Thank you in advance. ...

Tips for utilizing the Delete function in Python Flask

Need help with the Delete method in Python Flask. I'm encountering some difficulties in my code and it keeps displaying Method Not Allowed error when trying to load the URL http://localhost:8082/api/users/remove_group/5. @app.route('/api/users/re ...

Ways to remedy the white line produced by CSS transform when hovered over?

Has anyone discovered a fix for the white line or border that appears when an element is transformed with CSS scale on hover? I've tried various solutions such as: transform: translateZ(0), -webkit-backface-visibility: hidden, transform-style: preser ...

Attempting to align multiple images in the center

I'm struggling with this issue, trying to center my images. It seems like the first image referenced in imgTop is centered while the second one goes to the right. I want both to be centered evenly. Any help would be appreciated! #imageContainer { ...

Ways to emphasize text in a h2 header without affecting other elements

One particular HTML block is causing me some trouble: <h2><span class="numbers">1.1 </span>header text</h2> It's important to note that I did not write this HTML code, so my options for changing it are limited. Howev ...

Is there a way to configure the positioning of Bootstrap carousel thumbnails to be above and beside?

My goal is to customize a bootstrap 5 thumbnails carousel by placing the thumbnails either on the top or the left side of the slides section. The default setting is at the bottom, but I need these two variations. The base model works perfectly, but I' ...

Triggering a click event on various instances of a similar element type using the onclick function

Hey there, I'm a newcomer to Javascript. I've been practicing my Javascript skills and trying to replicate something similar to what was achieved in this example: Change Button color onClick My goal is to have this functionality work for multip ...

Issue with static resource fetching when referencing a .js file within an HTML document while using Flask

My HTML file loads my OpenLayers JavaScript file (which displays a map frame) when opened directly. However, when running the HTML from my Flask python app, the JavaScript file/object fails to load (resulting in no map display, just some heading text). I ...

HTML files do not inherit from other HTML files

I am venturing into the world of VSCode for the first time to create a web application. Starting with the basics, I have an index.html page with a simple "Hello, world!" message. Additionally, I have developed a layout.html file that contains code for a na ...

How can we effectively utilize LESS variables in styles.less when working with LESS files within components in Angular versions 6 or 7?

Running Angular version 7.0.0 will generate a folder structure typical for "ng new". Below is the content of my styles.less file: @personal-black: #0000; This snippet shows the content of my app.component.less file: ...

Requesting a rendezvous with PHP

When it comes to asking for a date in an HTML form, I used to utilize various methods: Utilizing 3 separate fields for day, month, and year Using a text field with additional labeling like "Start date (example: 31-12-2013)" Employing a reverse date ...

Challenges with Selenium Web Scraping

I'm currently in the process of creating a web scraper that extracts data from the Beatport top 100 chart. However, I've encountered an issue where some items are successfully located while others result in errors. def scrape_beatport(): user ...

Leveraging ASCII characters within the .htaccess file

I'm currently working on developing my own local network website and I'm interested in adding password protection to certain parts using .htaccess. However, the guide I've been following mentioned that they need to be saved with ASCII encodi ...

Missing dots on owl carousel

Currently, I am working on a project that involves using the owlcarousel library in javascript. Everything was running smoothly until I encountered an issue. Although I have set the dots to true in the code, they are not appearing on the carousel. Below i ...

Changing the CSS Border of Thumbnails

Take a look at this screenshot of a thumbnail grid. I need to reposition the gray border so that it sits below the price and is consistently aligned across all products. The challenge arises when product titles vary in length, causing the price to be posit ...

Question about the origin of style sheet source files [*.css?ver=]

Can you explain the purpose of appending a query string to the end of a style sheet? I frequently come across examples like this: some-stylesheet.css?ver=1.2.3 Appreciate your insights. ...