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

RAZOR - Strip image elements from variable with HTML content

The functionality of CSS isn't up to snuff on Mozilla Firefox

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

What is the process for altering the active status in pagination?

Tips for sending a string as HTML content in VueIn Vue, you can send a string as

Having trouble getting Sass extending to work in a basic scenario?

When attempting to print a Rectangle on my webpage using JavaScript and taking user input, I encountered an error stating that 'str' is not defined

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Elegant Popup Form

"Transforming a static navbar to a fixed position causes the page to jump

An issue with JSPDF arises when used on mobile devices

preserve functionality when switching between pages

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

Ensuring various conditions with ngIf

Maximizing page space with ReactJS and advanced CSS techniques

Failure to link style sheet to document

The Opera browser displays a horizontal orientation for vertical menus

Creating a dynamic progress bar that scrolls for multiple elements

Loading jsp content into a div dynamically within the same jsp file upon clicking a link

Clashing CSS Styles: Font Size Edition