Email Signature_logo

CSS METHODS THAT ADJUST CONTENT SIZE

You already voted!
CSS Methods

Table of Contents

display:flex and display:grid

With CSS you can use display: flex and display: grid are supported by all current browsers. The only thing lacking is subgrid functionality, which is only available in Firefox.

Example using display: grid:

body
{
  display: grid;
  grid:
    "header" auto
    "main" minmax(0,1fr)
    “footer" auto /
    minmax(12rem, 93rem);
}
header
{
  grid-area: header;
  background: gray;
}
main
{
 grid-area: main;
  background: blue;
  align-self: center
 }
footer
{
  grid-area: footer;
  background: black;
}
<header>My Website</header>
<main>Welcome to my blog..
<details><summary>Collapsible content</summary>
<p>Hello and welcome to my blog.</p>
<p>Hello and welcome to my blog.(2).</p>
<p>Hello and welcome to my blog. (3).</p>
</details>
</main>
<footer>copyright Mathiti 2022 </footer>

Example using display: flex:

html, body
{
 min-height: 100vh;
  padding: 0;
  margin: 0;
}
body
{
  display: flex; 
}
main
{
  background: blue;
  align-self: center;
}
<main>Welcome to my blog
<details><summary>Collapsible content</summary>
<p>Hello and welcome to my blog.</p>
<p>Hello and welcome to my blog. (2).</p>
<p>Hello and welcome to my blog. (3).</p>
</details>
</main>

It’s worth noting that in the examples that utilize both grid and flex, display:flex is generally easier to employ if that’s all you require. The advantage of using display:grid is that you can use logical grid-area names and merely update the grid property to swap layouts as needed without having to reorganize the elements. It’s also worth noting that Chrome doesn’t support subgrid, which would make nested layouts a lot easier. Therefore, as a developer you should arrange elements according to their accessibility requirements rather than their visual appearance.

CSS calc()

You may use calc(), which was introduced in CSS3, to have the center element span the full page vertically.The following example assumes that we have fixed-height header and footer components and want the section tag to use the whole vertical height available.

CSS Example:

html,
body {
  height: 100%;
}
header {
  height: 100px;
  background: gray;
}
section {
  height: calc(100% - (100px + 150px));
  background: black;
}
footer {
  height: 160px;
  background-color: gray;
}
<header>Welcome</header>
<section>Hi There</section>
<footer>150px</footer>

By using the cal() function in the above example we are adding the height of the elements. Rather than deducting from 100%. It is important to note that all parent elements should use height:100%.

#Customer Speak

Join Mathiti Ventures AS a Senior Project Manager!

We’re growing and looking for talented people like you!

We’re not big on resumes. They can hold back great talent. Instead, we focus on the content of the person, not the paper

So, we’ve crafted a roughly 30-minute test about the things that are important for this position. Taking this will help us both discover our potential fit.

 

"*" indicates required fields

Max. file size: 5 MB.
Max. file size: 5 MB.

Join Mathiti Ventures AS a Senior WordPress Developer!

We’re growing and looking for talented people like you!

We’re not big on resumes. They can hold back great talent. Instead, we focus on the content of the person, not the paper

So, we’ve crafted a roughly 30-minute test about the things that are important for this position. Taking this will help us both discover our potential fit.

 

"*" indicates required fields

Max. file size: 5 MB.
Max. file size: 5 MB.

Join Mathiti Ventures AS a Senior PHP Developer!

We’re growing and looking for talented people like you!

We’re not big on resumes. They can hold back great talent. Instead, we focus on the content of the person, not the paper

So, we’ve crafted a roughly 30-minute test about the things that are important for this position. Taking this will help us both discover our potential fit.

 

"*" indicates required fields

Max. file size: 5 MB.
Max. file size: 5 MB.

Join Mathiti Ventures as a Senior React Developer!

We’re growing and looking for talented people like you!

We’re not big on resumes. They can hold back great talent. Instead, we focus on the content of the person, not the paper

So, we’ve crafted a roughly 30-minute test about the things that are important for this position. Taking this will help us both discover our potential fit.

 

"*" indicates required fields

Max. file size: 5 MB.
Max. file size: 5 MB.

Join Mathiti Ventures as a Job Title!

We’re growing and looking for talented people like you!

We’re not big on resumes. They can hold back great talent. Instead, we focus on the content of the person, not the paper

So, we’ve crafted a roughly 15-minute test about the things that are important for this position. Taking this will help us both discover our potential fit.

 

 

Coming Soon