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 give text or an image a transparent background using CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to give text or an image a transparent background using CSS

In this article, we’ll look at how to give text or an image a transparent background using CSS.

How to give text or an image a transparent background using CSS?

To give text or an image a transparent background using CSS, we set the background-color property.

For instance, we write

<p style="background-color: rgba(255, 0, 0, 0.5)">
  <span>Hello, World!</span>
</p>

to set the background-color to a rgba value.

The last value is the opacity.

Conclusion

To give text or an image a transparent background using CSS, we set the background-color property.

Categories
CSS

How to make a div not larger than its contents with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to make a div not larger than its contents with CSS.

In this article, we’ll look at how to make a div not larger than its contents with CSS.

How to make a div not larger than its contents with CSS?

To make a div not larger than its contents with CSS, we make it display as an inline-block element.

For instance, we write

<div>
  <div class="yourdiv">content</div>
</div>

to add nested divs.

Then we write

.yourdiv {
  display: inline;
}

to make the inner div an inline-block element with display: inline;.

Conclusion

To make a div not larger than its contents with CSS, we make it display as an inline-block element.

Categories
CSS

How to change the cursor into a hand when a user hovers over a list item with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to change the cursor into a hand when a user hovers over a list item with CSS.

In this article, we’ll look at how to change the cursor into a hand when a user hovers over a list item with CSS.

How to change the cursor into a hand when a user hovers over a list item with CSS?

To change the cursor into a hand when a user hovers over a list item with CSS, we set the cursor property.

For instance, we write

li {
  cursor: pointer;
}

to add the cursor: pointer style to make the cursor turn into a hand when we hover over li elements.

Conclusion

To change the cursor into a hand when a user hovers over a list item with CSS, we set the cursor property.

Categories
CSS

How to auto-resize an image to fit a div container with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to auto-resize an image to fit a div container with CSS

In this article, we’ll look at how to auto-resize an image to fit a div container with CSS.

How to auto-resize an image to fit a div container with CSS?

To auto-resize an image to fit a div container with CSS, we set the max-width and max-height properties.

For instance, we write

img {
  max-width: 100%;
  max-height: 100%;
}

to set the max-width and max-height to fill the whole container’s dimension if it doesn’t change the aspect ratio .

Conclusion

To auto-resize an image to fit a div container with CSS, we set the max-width and max-height properties.