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

Question

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!

html css

Answer 1

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

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 3

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.

Answer 4

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.

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

Answer №1

Answer №2

Similar questions

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

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%

Click X button to toggle and close the dropdown menu

incorporate partial html into nodeJS & Jade using AJAX requests

Enhancing Images with Dynamic Captions Using JQuery

Tips for utilizing the Delete function in Python Flask

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

Attempting to align multiple images in the center

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

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

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

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

HTML files do not inherit from other HTML files

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

Requesting a rendezvous with PHP

Challenges with Selenium Web Scraping

Leveraging ASCII characters within the .htaccess file

Missing dots on owl carousel

Changing the CSS Border of Thumbnails

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