Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

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
JavaScript Answers

How to retrieve the position (X,Y) of an HTML element with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to retrieve the position (X,Y) of an HTML element with JavaScript.

In this article, we’ll look at how to retrieve the position (X,Y) of an HTML element with JavaScript.

How to retrieve the position (X,Y) of an HTML element with JavaScript?

To retrieve the position (X,Y) of an HTML element with JavaScript, we use the getBoundingClientRect method.

For instance, we write

const { top, right, bottom, left } = element.getBoundingClientRect();
console.log(top, right, bottom, left);

to call the element.getBoundingClientRect method to return the position of the element.

We get the top, right, bottom, and left position from the object returned.

Conclusion

To retrieve the position (X,Y) of an HTML element with JavaScript, we use the getBoundingClientRect method.