Category: CSS

Categories
CSS

How to make a div fill the height of the remaining screen space with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to make a div fill the height of the remaining screen space with CSS

In this article, we’ll look at how to make a div fill the height of the remaining screen space with CSS.

How to make a div fill the height of the remaining screen space with CSS?

To make a div fill the height of the remaining screen space with CSS, we use flexbox.

For instance, we write

<body>
  <div>header</div>
  <div class="content"></div>
</body>

to add the body element with some divs.

Then we write

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

to make the body element a flex container with display: flex;.

We set the flex direction to vertical with flex-direction: column;.

Then we make the div with class content fill the remaining space with flex-grow: 1;.

Conclusion

To make a div fill the height of the remaining screen space with CSS, we use flexbox.

Categories
CSS

How to make a div 100% height of the browser window with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to make a div 100% height of the browser window with CSS

In this article, we’ll look at how to make a div 100% height of the browser window with CSS.

How to make a div 100% height of the browser window with CSS?

To make a div 100% height of the browser window with CSS, we set the height to 100vh.

For instance, we write

div {
  height: 100vh;
}

to make the div fill the screen with height: 100vh;.

Conclusion

To make a div 100% height of the browser window with CSS, we set the height to 100vh.

Categories
CSS

How to vertically center text with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to vertically center text with CSS.

In this article, we’ll look at how to vertically center text with CSS.

How to vertically center text with CSS?

To vertically center text with CSS, we use flexbox.

For instance, we write

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

to make the div a flex container with display: flex;.

And then we center its content horizontally with justify-content: center;.

And we center its content vertically with align-items: center;.

Conclusion

To vertically center text with CSS, we use flexbox.

Categories
CSS

How to transition height: 0; to height: auto; using CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to transition height: 0; to height: auto; using CSS.

In this article, w’ell look at how to transition height: 0; to height: auto; using CSS.

How to transition height: 0; to height: auto; using CSS?

To transition height: 0; to height: auto; using CSS, we set the max-height.

For instance, we write

<div id="menu">
  <a>hover me</a>
  <ul id="list">
    <!-- ... -->
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

to add a div with a ul.

Thenw we write

#menu #list {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  background: #d5d5d5;
}

#menu:hover #list {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}

to set the max-height of the list.

And we set the transition property to the effect with the max-height applied at the end.

Conclusion

To transition height: 0; to height: auto; using CSS, we set the max-height.

Categories
CSS

How to add an unordered list without any bullets with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to add an unordered list without any bullets with CSS.

In this article, we’ll look at how to add an unordered list without any bullets with CSS.

How to add an unordered list without any bullets with CSS?

To add an unordered list without any bullets with CSS, we set the list-style-type property.

For instance, we write

ul {
  list-style-type: none;
}

to remove the bullets from ul with list-style-type: none;.

Conclusion

To add an unordered list without any bullets with CSS, we set the list-style-type property.