Modify the div height to match the parent div's height

I'm currently working on customizing a navigation panel, and I'm looking to align the styles of the various options with the parent div. One specific adjustment I need to make is setting the background color of the options to match the parent div, filling the color across the entire height. https://i.sstatic.net/nyjRu.png

Below is the code snippet:

<div class="text-center text-muted"> <div class="container">
 <div class="card">
  <div class="card-header" style="background-color: #e9ecef;">
   <div class="row mt8" id="nav_panel">
    <div class="col-md-2" id="nav_panel_monday" style="background-color: rgb(0, 160, 157);">
    <a id="nav_href_monday" href="#" style="color: white;">Monday</a>
   </div>
   <div class="col-md-2" id="nav_panel_tuesday">
    <a id="nav_href_tuesday" href="#">Tuesday</a>
   </div>
   <div class="col-md-2" id="nav_panel_wednesday">
    <a id="nav_href_wednesday" href="#">Wednesday</a>
   </div>
   <div class="col-md-2" id="nav_panel_thursday">
    <a id="nav_href_thursday" href="#">Thursday</a>
   </div>
   <div class="col-md-2" id="nav_panel_friday">
    <a id="nav_href_friday" href="#">Friday</a>
   </div>
  </div>
 </div>
 <div class="card-body">
  <div id="div_hidden_monday"></div>
  <div id="div_hidden_tuesday" style="display: none;"></div>
  <div id="div_hidden_wednesday" style="display: none;"></div>
  <div id="div_hidden_thursday" style="display: none;"></div>
  <div id="div_hidden_friday" style="display: none;"></div>
 </div>
 </div>
</div>
</div>
.container {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}
.card {
    position: relative;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #FFFFFF;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}
.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
#nav_panel {
    background-color: #e9ecef;
    padding-right: 0;
    padding-left: 0;
    border-radius: 5px;
}
.col-md-2 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

If anyone has any suggestions or feedback, it would be greatly appreciated! Thank you for taking the time to read through this.

Answer №1

It seems like removing the padding from the .card-header and adding it to the child elements might be a good solution for your issue. You can check out an example of this approach here: https://jsfiddle.net/bhusalhari99/sruLkt2b/3/

I hope this solution works for you!

Answer №2

Currently, the issue with using padding and margin has been resolved. However, to ensure proper alignment, it is recommended to restructure the nav HTML using nav, ul, and li elements as demonstrated here

.container {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

.card {
  position: relative;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #FFFFFF;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card-header {
  padding: 0 15px !important;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.card-header a {
  display: block;
  padding: 10px 0;
}

#nav_panel {
  background-color: #e9ecef;
  padding-right: 0;
  padding-left: 0;
  border-radius: 5px;
}

.col-md-2 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="text-center text-muted">
  <div class="container">
    <div class="card">
      <div class="card-header" style="background-color: #e9ecef;">
        <div class="row mt8" id="nav_panel">
          <div class="col-md-2" id="nav_panel_monday" style="background-color: rgb(0, 160, 157);">
            <a id="nav_href_monday" href="#" style="color: white;">Monday</a>
          </div>
          <div class="col-md-2" id="nav_panel_tuesday">
            <a id="nav_href_tuesday" href="#">Tuesday</a>
          </div>
          <div class="col-md-2" id="nav_panel_wednesday">
            <a id="nav_href_wednesday" href="#">Wednesday</a>
          </div>
          <div class="col-md-2" id="nav_panel_thursday">
            <a id="nav_href_thursday" href="#">Thursday</a>
          </div>
          <div class="col-md-2" id="nav_panel_friday">
            <a id="nav_href_friday" href="#">Friday</a>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div id="div_hidden_monday"></div>
        <div id="div_hidden_tuesday" style="display: none;"></div>
        <div id="div_hidden_wednesday" style="display: none;"></div>
        <div id="div_hidden_thursday" style="display: none;"></div>
        <div id="div_hidden_friday" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>

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

Issue with Firefox position: absolute not producing the desired outcome

I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4) ...

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

Drag a spinning cube using CSS and Jquery when the mouse is pressed

I'm attempting to develop a dynamic rotating cube that users can manipulate to their desired side by clicking and dragging on the cube. Currently, I have functionality where the cube moves as the mouse cursor moves across the screen, but this results ...

Automatically trigger a PHP reload/refresh based on user input

My website has a form that populates a table with data. Currently, after the user submits the data, they have to manually refresh the page in order to see the new data displayed. Is there a way to automatically refresh the table every time the user hits ...

List of random items:1. Red pen2

By using JavaScript, I want to generate a paragraph that contains a randomly ordered list of items (presented in paragraph format) for a basic website. The input would include: apples concrete a limited dose of contentment North Carolina The final ...

Align a span vertically within a div

I need help aligning the content "ABC Company" vertically within a div using Bootstrap 4's alignment helper classes. Despite my efforts, I have not been successful. Here is the code I am using: <div class="container" style="width: 740px;"> < ...

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

Ways to display an icon with an underline effect upon hovering over text

I have implemented a CSS effect where hovering over text creates an underline that expands and contracts in size. However, I now want to display an icon alongside the text that appears and disappears along with the underline effect. When I try using displa ...

Adjusting the width of the container <div> will automatically resize the inner <div> to match

I have a main container element. .wrapper{ border:1px solid blue; position:relative; top:20%; left:30%; height: 300px; width: 350px; } When I adjust the width of the parent container, the child box does not reposition itself accor ...

Group in group, glitch in outdated browser

Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...

JavaScript decimal precision function malfunctioning with currency format conversion

My current snippet works perfectly with the currency format 249.00, but I need to adapt it for a site that uses euros with pricing in the format 249,00. When I make this change, the total calculation goes haywire and shows as 29.900,00. Can someone advise ...

Is it possible to use an angular expression as the ng-click function?

I have been searching everywhere for the answer to this question. Within my code, there is an angular object called column.addOnParams. This object includes a child element named rowClick, which can be accessed using column.addOnParams.rowClick. The val ...

The form submits automatically upon loading the page with empty input fields

I recently created a form on my website located at . Initially, the form functioned correctly and the PHP script executed as expected. However, I am now encountering an issue where every time I load the page, a popup message appears indicating that the for ...

How come jQuery won't let me activate the 'change' event on a radio button?

Click the link below to access the page: Below are the original javascript codes that are functioning correctly: $(document).ready(function(){ $(".open_gene").on('change', function(event) { $('#Gene_field').show(); }); ...

Troubleshooting: Replacing onClick() in HTML with JavaScript when addEventListener is not functioning as expected

I've tested several solutions already, but unfortunately, none of them seem to work for me. My Flask application utilizes a combination of HTML and JavaScript to present a few web pages. At the moment, I still have some inline code (which is also pr ...

CSS - Curved background image in the top left corner

Currently in the process of creating a website here. There is a postcode search div on the right side, and I am looking to round the top corner of it. I have decided to use images to achieve the rounded corners effect. My requirement is that any method us ...

Generating unique spreadsheet identifiers in an HTML file

When it comes to displaying a chart using Google Sheets, I encounter an issue where the data is sourced from the same spreadsheet: function updateChart() { var ui = HtmlService.createHtmlOutputFromFile('ChartLine').setWidth(1350).setHeight(550) ...

Error message: "AngularJS encountered a $injector:modulerr error in Internet Explorer 11."

I've successfully created an AngularJS App that functions properly on most browsers like Firefox, Opera, Safari, Edge, and Chrome. However, there seems to be a compatibility issue with IE 11. When attempting to open the app in IE 11, the following er ...

Trouble with Bootstrap 5 Dropdown Functionality

Currently, I am using Bootstrap 5 in conjunction with Django to create a website and I'm encountering difficulties with getting a dropdown feature to work properly. Despite copying the code directly from w3schools, it fails to function when I load the ...

Tips for updating one-time binding data in AngularJS

I am currently facing an issue with a div that displays details such as mobile number, name etc. in the format: {{::mobilenumber}}, {{::name}} Within this div, there is a button that when clicked should populate the same values in a new form However, des ...