What is determining the height of this grid container?

How is the height of .footer calculated in scenario #2?

#1

.footer {
}

img {
  width: 100%;
}
<div class="footer">
<img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image">
</div>

The calculation for the footer's height in this case involves considering the width of the initial-containing block (html) and accounting for the aspect ratio of the image.

#2

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: 100%;
      grid-template-rows: 100%;
  margin: 0 auto;
}

img {
  height: 100%;
  width: 100%;
}
<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

I'm trying to determine what sets the height of the footer since each image's width is a third of the footer's width. Could the intrinsic dimensions of the images be influencing it despite not scaling up to their aspect ratio? The height of img is specified as 100%, but 100% of what?

htmlcsscss-grid

Answer №1

To start, we need to remove some properties so that the code looks like this:

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100%;*/
  margin: 0 auto;
}

img {
  /* height: 100%; */
  width: 100%;
  outline:1px solid red;
}
<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image">

The footer now has a width of 100vw with 3 equal columns. Each image will take up width:100% inside each column while maintaining its ratio. The height of the footer and row are defined by the grid's equal column heights. This is important when setting height:100% for the images.

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100%;*/
  margin: 0 auto;
}

img {
  height: 100%;
  width: 100%;
  outline:1px solid red;
}
<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

If you set an explicit height on the grid as in the following example, the columns and rows will have a fixed height of 200px.

In a different scenario, one image determines the height and sets its own percentage-based height!

.icons {
  display: grid;
  margin: 0 auto;
  width:80%;
  border:2px solid
}

img {
  height: 150%;
  display:block;
  width: 100%;
  outline: 1px solid red;
}
<div class="icons">
  <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
</div>

Notice how the image overflows by exactly 50%, which is the difference between 150% and 100% (the default height).

For more examples, check out this related question: Why is my Grid element's height not being calculated correctly?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on ensuring a div covers the entire page even when a scrollbar is present

<div id="outer_product_wrapper" style="display: none;"> <div id="outer_inner_product_wrapper"> <div id="inner_product_wrapper"> Test </div> </div> </div> I&apo ...

htmlcss

Use href id to navigate back to the top of the page by

I am trying to implement a function that scrolls the div to the top position. However, I am encountering an issue with retrieving the href value. When I use 'a' in console.log(a);, it returns undefined. function myFunction() { var a=$ ...

javascriptjqueryhtmlcss

The WordPress GD Star rating plugin is failing to load on the webpage

I am having trouble getting the GD star rating plugin to load on my website. I followed the correct installation and configuration steps, but the plugin still won't show up on the page. I have attempted various solutions without success. Can anyone s ...

csswordpress

Personalize the Hover color on your flexdashboard with a touch of custom CSS

I am currently working on building a dashboard with Flexdashboard and I want to customize the hover and active colors of the Flexdashboard pages named Capture and Results with specific colors that are unique to the client. I prefer not to use the default F ...

cssrbootstrap-4r-markdownflexdashboard

Webdriver: Halting loop upon meeting specified condition

I am attempting to hover over each seat and click on the available seat. However, I am encountering an issue where the web element loop is not being broken once an available seat is found. The program hovers over some seats but never actually clicks on any ...

javahtmlselenium-webdriver

What is the best way to loop through an array of JSON data in order to consistently retrieve the initial JSON object?

How can I retrieve only the full highlight videos from the JSON object in the video array? { "response": [ { title: "United vd Chelsea", "videos": [ { "title": "Highlights&quo ...

htmlarraysjsonangular

What are some methods for decelerating typewriter text animation?

I'm currently updating my portfolio and have incorporated a typewriter effect into the second line of text. However, I'm finding that the speed of the effect is a bit too fast for my liking. I've attempted to adjust the animation seconds, de ...

htmlcssvisual-studio-codebootstrap-4css-animations

What is the best way to perfectly align cards both horizontally and vertically on the entire page, ensuring the layout remains consistent on mobile devices as well?

When viewed on larger screens, such as monitors, the layout functions perfectly. However, on smaller screens like mobile phones, some cards may get cut off. On larger screens, the cards are displayed in a single row and will adapt to a new line if the scr ...

htmlcssbootstrap-4

Is it possible to make nested HTML list items align to the left?

Is it possible to align nested HTML list items to the left? For example: Bat Cat Ratonetwothree Mat <ul> <li>Bat</li> <li>Cat</li> <li>Rat<ul><li>one</li><li>two< ...

javascriptjqueryhtmlcss

Owl carousel experiencing issues with navigating to the previous and next slides

I've been struggling to get the owl carousel slider working properly, specifically the previous and next buttons. Here is a snippet of my code: <div class="magazine-carousel owl-theme"> <div class="item"></div> <div class="item" ...

jqueryhtmltwitter-bootstrapowl-carousel

Deleting content in a text area when specific text is entered

Is there a way to clear the textarea value if I type in <br>? The code I have right now is shown below. I understand that this may seem like an odd request, but I am experimenting with a typing effect. function eraseText() { document.getElemen ...

javascripthtml

When adjusting the window size with the <ion-split-pane>, both the menu and router outlet disappear

When I have two ion menus and one main content (router outlet) and resize the page or switch to mobile view, the page appears blank as if the content is missing. Here is the code: <ion-app> <ion-split-pane> <ion-menu side="start" me ...

htmlcssangularionic-frameworkmenu

Setting the height of a child tag: A step-by-step guide

When trying to set the height of a child tag to 100%, I encountered an issue where the height would remain fixed after redirecting to another page, preventing the page from scrolling. Styling for Image 1 body{ background: url("Resources/Cash.jpeg&q ...

htmlreactjsheight

Tips for choosing a nested element within a div using CSS

I'm looking to target a specific child element within a div using CSS. Here's the HTML code I have: <div class='body'> <text>This is a text element</text> </div> Instead of adding a class or an ID, I want to ...

htmlcss

The history.replaceState() function is failing to execute within the script of an <iframe>

I am currently in the process of developing an addon. This addon will be displayed within an <iframe>. <div> <iframe src="my/add-on/path"> <!-- contents expanded here --> </iframe> </div> Within the a ...

javascripthtmliframe

Enable JavaScript functionality on a button within a form that is not designated as a submit button

I am working on a form with two divs, one visible and the other hidden. The first div contains required input elements in the HTML. When the user fills out the first form and clicks the button, the first div slides up while the second one slides down using ...

javascripthtml

Troublesome scrollbars in dynamically resizing containers causing issues across IE7, Firefox, and Chrome

If you have any ideas for a different title, please share. Check out this JSFiddle to see the issue in action: http://jsfiddle.net/VXsAg/ Essentially, my challenge is creating an element with a fixed height and width that expands horizontally as needed. ...

htmlcssscrollbaroverflow

Stop the color buffer from being automatically cleared in WebGL

Removing gl.clearColor(c[0],c[1],c[2],1.0); gl.clear(gl.COLOR_BUFFER_BIT ); does not stop the screen from getting cleared at the start of the next draw cycle. Is there a method to avoid this situation? I am aiming for an overpaint effect. ...

htmlwebgl

An icon wrapped in an <a> element using the link_to tag

I am encountering an issue with a navbar button: <%= link_to new_post_path do %> <a class="btn-navbar"><i class="fa fa-plus" aria-hidden="true"></i></a> <% end %> The button is unresponsive and does not direct me to ...

htmlruby-on-railsruby-on-rails-4

How can I convert an HTML table into a PDF using TCPDF while ensuring that all content is contained within a single div in PHP?

I have successfully converted my JSON API data into an HTML TABLE format and now I am trying to generate a PDF from this HTML TABLE using TCPDF in PHP. Despite trying various methods related to PDF generation using TCPDF, I am facing issues with my code wh ...

phphtmljson