Adjust the div to match the height of the td element

Hey there, can you help me out with this code snippet?

<html>
    <body>
        <table>
            <tr>
                <td>
                    <div class="the-div">h:100%</div>
                </td>
                <td>
                    <div class="the-div-w-height">h:100px</div>
                </td>
            </tr>
        </table>
    </body>
</html>

And here is the corresponding CSS style:

.the-div
{
  height: 100%;
  background-color: red;
}

.the-div-w-height
{
  height : 100px;
  background-color: yellow;
}

I'm trying to get the red div to stretch inside the table cell while allowing the other div to adjust its height based on content. Essentially, I want the first div to expand along with the table.

Your assistance would be greatly appreciated!

Answer №1

By including height: 100% in the parent elements table and td:

Check out this example on CodePen

table {
  height: 100%;
}
td {
  border: 1px solid #000;
  height: 100%;
}
.the-div
{
  height: 100%;
  background-color: red;
}

.the-div-w-height
{
  line-height: 100px;
  background-color: yellow;
}

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

Obtaining search engine results from a webpage without using an API

In my attempts, I tried the following: $url = “http://www.howtogeek.com”; $str = file_get_contents($url); However, this code displays the entire website instead of the content from the URL specified in $url. The website I want to retrieve data from ...

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

What is the best way to create a single HTML file that can showcase several different pages?

I am just starting out in web design, and I am currently working on a hobby project which is an e-commerce site. My issue is that I don't want to manually link every single product page. This would result in a large number of HTML files. Instead, I w ...

Tips on saving this information in a MySQL database

I'm currently developing a php script that collects and saves links in mysql. However, I've encountered an issue where the script sometimes captures multiple links for the same download, as shown below: http://www.fileserve.com/file/XXXXXX http: ...

Struggling to find my way around my website's pages since implementing jquery scroll features

Currently, I am developing a website for a small business. I have set up a feature on one of the pages that enables users to click on a title in the table of contents and have the page automatically scroll down to that specific section. Below is the HTML ...

The red error text below the input becomes less visible when the input is focused on Windows, creating

My issue involves a basic input field and error validation message, both set against a dark background. The problem arises when the error text is displayed and I click on the input field - the error text suddenly loses contrast and appears "thinner." What& ...

Why isn't the SASS extending button working on anchor tags in Bootstrap 4?

After noticing that I really like the style of the default buttons from pre-Bootstrap 4, I decided to try my hand at creating my own version using SASS code. Here's what I came up with: .btn-default { @extend .btn; border-color: #A5A5A5; } . ...

Guide to implementing a sliding effect for accordion menu using Javascript

Currently, I am working on an accordion menu that slides up and down when clicked. While I have been successful in achieving the functionality, I am facing a challenge with implementing a smooth animation effect that smoothly slides from top to bottom and ...

Exploring the Integration of Metro CSS 3 Form Validation within the MVC Framework

I am looking to implement the form validator feature from Metro CSS 3 in my MVC 5 application. Below is a snippet of my code: @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { @Html. ...

Having trouble connecting local stylesheet on server?

Currently, I am developing an HTML-based game with Node.js, focusing on enhancing the front-end interface. While trying to include a CSS stylesheet, I encountered an unusual issue. The structure of my folders is organized as follows: C:\Users\m ...

Style your tables so that each row changes color when hovered over

I am dealing with a large table containing multiple rows, each of which has a border of 2px solid grey. My current issue is that the entire table is linked, and I want to change the border color to black when hovering over any row. However, applying :hove ...

TinyMCE evades the FreeMarker tags

Utilizing TinyMCE 4 as a WYSIWYG editor for HTML pages has been helpful. However, I have noticed that when integrating FreeMarker tag idioms like <#if condition>, <#else> in TinyMCE, they sometimes get distorted when switching between "code vie ...

Utilizing jQuery to Maintain State Across Page Refreshes with Cookies

Currently, I am attempting to create a script that can retain its state even after the page is refreshed. Here is my progress so far: Utilizing jQuery: $(window).ready(function() { var voteId = $('.gallery-item a'); $(voteId).click(function() ...

`Can you guide me on the proper path for designing this website layout?`

As I embark on creating my first website, I have a specific vision in mind. I want the full display on a computer screen to show all the information and links without any need for scrolling. However, when the window is resized to smaller screens, I would l ...

Incorporating AngularJS to show sections of a webpage in real-time

, I am working on an angular js application in which I'm using rest services to retrieve http response data. My goal is to display different parts of the webpage conditionally based on the response data. For example, if the data in angular indicates " ...

Utilizing a jQuery click event to modify the placement of a table

I have a request regarding the tables within the #middlebox. I would like to be able to rearrange the table positions by clicking on the list items. For instance, if the current order of the tables is starter -> soup -> seafood, clicking on the #seaf ...

Attempting to align content in the center by utilizing table cells

I'm completely new to this, so please bear with me, but I have a question. I've been attempting to vertically align a div in the center of my webpage, but I can't seem to get it to work. The text always ends up loading in the top left corne ...

What is the best way to conceal a row when a particular field is devoid of content?

Is it possible to hide an entire table row if a field is empty? For example: https://i.sstatic.net/tMW7L.png If a certain field is empty, I want the entire row to be hidden, either using JavaScript or jQuery. I have tried some methods but none of them fu ...

Create a continuous scrolling tool similar to Google Reader for iGoogle

Do you know how to create an infinite scroll widget similar to Google Reader on iGoogle? This widget should be able to dynamically load data as the user scrolls, and replace the traditional scroll bar with a pair of up and down arrows. The HTML structure ...

Utilizing React Developer Tools to easily click a button

Currently, I am working on building a card in React with Material UI. Here is the layout: https://i.sstatic.net/CFS58.png The button labeled Sign out has the functionality to change its state from true to false using React developer tools. However, I am ...