Filling a table cell with a div that spans 100% height

I am currently working with Bootstrap and I am attempting to create three columns filled with text overlaying a rectangle. The squares within the columns should have equal height and there needs to be spacing between them.

Through the use of display:table; and display:table-cell; properties, I have managed to ensure that the col- divs have uniform height. However, I am facing difficulty in making the inner div completely fill its parent. Any insights on how this can be achieved would be greatly appreciated.

Here is the code snippet:

<div class="container">
  <div class="fons"></div>
    <div class="linia">
      <div class="col-md-4">
        <div class="dins">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="dins">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="dins">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>

    </div>

</div>

Additionally, here is the associated CSS styling:

.fons {
  background-color: blue;
  height: 100px;
  }

.linia {
    display: table;
    margin-top:-50px;
  }

.col-md-4 {
    display: table-cell;
    float:none;
  }

.dins {
    background-color: cyan;
    padding: 15px;
  }

The main query revolves around ensuring that the .dins div fills up the entirety of its parent table cell.

You may view a demonstration that I have created using the following link: https://www.bootply.com/dId7aMpOcX

htmlcsstwitter-bootstrap

Answer №1

try out this snippet of code

.container {
  width:100%;
}

alternatively, you could apply the styling directly to the div

<div style="width:100%">

Answer №2

https://i.stack.imgur.com/m1XKN.png

try out this snippet of code

<div class="container">
      <div class="fons">
        <table width="100%">
          <tr><td>
            <div class="linia">
     <div class="col-md-4">
            <div class="dins">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
              </div></div></td>
            <td>
            <div class="linia">
     <div class="col-md-4">
            <div class="dins">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
              </div></div></td>
            <td>
       <td>
            <div class="linia">
     <div class="col-md-4">
            <div class="dins">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
              </div></div></td>

          </tr>
        </table>][1]][1]

</div>

Answer №3

Instead of using col-md-4, you have the option to simply use a division element. See below for the code:

<div class="linia">
  <div class="dins">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="dins">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="dins">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

CSS Styles:

.linia {
 display: table;
 margin: 0px -15px;
 border-spacing: 15px;
}
.dins {
 background-color: cyan;
 padding: 15px;
 display: table-cell;
 height: 100%;
 width: 33.33334%;
}

Answer №4

One option is to set a minimum height for your din classes.

   .dins {
    background-color: blue;
    padding: 20px;
    min-height:200px;
  }

Alternatively, you can explore other solutions by visiting How to make Bootstrap columns equal height

Answer №5

Consider trying out the flex property :

Check out this Plunker Link for reference : https://plnkr.co/edit/VJFOdwLjgBk9rpGP5KYQ?p=preview

<div class="container">
  <div class="fons"></div>
  <div class="linia">

      <div class="dins">
        <p>Showing dummy text here, adjust as needed: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>


      <div class="dins">
        <p>More dummy text for demonstration: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Additional dummy text to showcase flex implementation: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>


      <div class="dins">
        <p>Another set of dummy text for illustration purposes: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>


  </div>
</div>

CSS :

.fons {
  background-color: blue;
  height: 100px;
}

.linia {
    display: flex;
    margin-top:-50px;
    box-sizing : border-box;
}

.dins {
    background : cyan;
    margin: 15px;
    padding : 15px;
}

Answer №6

Please review the following code structure: https://jsfiddle.net/c0mcwbph/

<div class="container">
<div class="fons"></div>
<div class="linia-wrapper">
<div class="linia">
<div class="col-md-4">
<div class="dins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4">
<div class="dins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-md-4">
<div class="dins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>

CSS

.fons { background-color: blue; }
.linia-wrapper { display: table; width: 100%; }
.linia { display: table-row; }
.col-md-4 { display: table-cell; float: none; }
.dins { background-color: cyan; padding: 15px; }

Answer №7

After trying various solutions, I found that Solution 1 here partially solved the issue by avoiding rounded corners on the div's bottom.

Although Solution 2 seemed more efficient in theory, it did not fully resolve the problem as expected.

Now, the correct solution code that is working flawlessly can be found here: https://www.bootply.com/dId7aMpOcX

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

Using .htaccess to Conceal Directories with Documents

It seems that my website is being targeted by individuals seeking to obtain all the code. I have implemented an .htaccess file that will display nothing when someone visits domain.com/images, but if they specifically request domain.com/images/logo.png, the ...

htmlcss.htaccessdirectory

Trying to reduce the cursor box area within an A link containing a div box

My communication skills are lacking, so I have included an image to better illustrate my issue. Here is the problem .body { text-align: center; display: flex; flex-direction: column; align-items: center; } .flex-container { display: flex; ...

htmlcss

Retrieve information from a MySQL database and integrate it into a different application

This php script is used to generate a table with a "book" button next to each row. The goal is to extract the values of "phase" and "site" from the specific row where the "book" button is clicked, and transfer them to another form (in "restricted.php") fo ...

javascriptphphtmlmysqlforms

variable identifier looping through elements

I'm attempting to assign a dynamic ID to my div using ng-repeat. Here's an example: <div id="$index" ng-repeat="repeat in results.myJsonResults"> <div id="$index" ng-click="saveID($index)" ng-repeat="subRepeat in results.myJsonResul ...

javascripthtmlangularjs

Rotating and scaling an image simultaneously using CSS3

I am feeling very puzzled. Why am I unable to simultaneously scale and rotate? Despite my attempts, it seems to be not working: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } ...

javascriptjquerycsscss-transforms

Using Jquery to detect if there are any Space characters in the user input

In my form, users are required to set up a new Username. The problem arises when they include a space in their username, which I want to prevent. Currently, I am able to detect the presence of a space with this code: var hasSpace = $('#usernameValue ...

javascriptjqueryhtmlforms

Is the phrase "This site was built with Wix" visible on the website?

Recently, I've begun using Wix to build a website. I'm curious - does the message 'This website is created using Wix' appear at the top and bottom of the page when it's published? 'This website is created using Wix' I ...

html

Is there a way to specifically target CSS media queries if the device resolution is similar, but the device screen size (measured in inches) varies

I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...

javascriptandroidjquerycss

Adjust the maximum and minimum values on a dual thumb slider

I have implemented a two thumb range slider to define the maximum and minimum values. However, I recently discovered that it is possible for the thumbs to cross over each other - the max value can exceed the min value and vice versa. I am looking for a s ...

javascripthtmljquerycss

How to effectively utilize Python to compare HTML files

Can the HTML be compared differently as shown below? html_1 = "<h1>text<h1>" html_2 = "<h2>text<h2>" Using Google's diff_prettyHtml may not yield accurate results. If I want to say that 1 has changed to 2: <h <del styl ...

pythonhtmldiff

Newbie inquiry: How to utilize classes in HTML for CSS implementation?

I'm a beginner in the world of HTML and I have what might be considered as a basic question... Here is the style definition for my header in the CSS file: h1.heading { color: indianred; } I attempted to link it to my HTML file like this, but unfo ...

htmlcss

Ways to add more spacing between list items without affecting the position of the bottom div

I'm attempting to achieve a layout similar to an Instagram post, where the list expands but does not push the footer down. In my case, adding margin-bottom to the comment class affects the height of the <div class="post-details-container" ...

htmlcss

What is the best way to incorporate a dropdown menu into existing code without causing any disruption?

I've come across this question multiple times before, but I still haven't found a suitable answer or solution that matches my specific situation. (If you know of one, please share the link with me!) My goal is to create a basic dropdown menu wit ...

javascriptjqueryhtmlcsstwitter-bootstrap

What could be causing an unidentified term to be included in the Vue SCSS compilation process

In my Vue application with TypeScript, I encountered an error during compilation that reads as follows: Failed to compile. ./src/style.scss (C:/../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!C:/.../node_modules/vue-loader/lib/loaders/stylePostL ...

cssvue.jssass

Tips for incorporating a download button into a video player using Plyr JS

I'm using Plyr JS and I am trying to add a download option for each video. Here is what I've done so far to make the download option work: Even though I have included: controlsList="nodownload" <video controls crossorigin playsinline contro ...

javascripthtmlhtml5-videoplyr.js

Loading Kendo JS on the client side proves to be rather time-consuming

Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and ...

cssangularjsuser-interfacekendo-uischeduler

Enable a single flex item to wrap across multiple lines

I have an HTML code snippet that needs to be styled using Flexbox. Specifically, I want to re-order the elements and create a 'line break' before the last item. How can I utilize Flexbox so that most flex items are treated as atomic units, but on ...

cssflexbox

Loading hover images in css through jQuery preloading

Is there a reliable method for preloading CSS hover images using jQuery that anyone knows of? My ideal scenario would involve adding a class (for example, "pre-load-hover") to any element needing preloading, and then implementing JavaScript in $(document) ...

jqueryhtmlcss

Inquiring about how to make the pieces move on the checker boards I created

I'm having trouble getting my SVG pieces to move on the checkerboard. Can someone please help me figure out how to make them move, even if it's not a valid move? I just want to see them in motion! The important thing is that the pieces stay withi ...

javascriptjqueryhtmlcssnode.js

Exploring the world of CSS font families in Sublime Text 3 and linking them to the web

Is there a way to connect a font from the internet (such as those on Google Fonts: ) to my Sublime Text CSS file? I have tried linking it to an HTML file that is already linked to my CSS code, but it hasn't been successful. ...

htmlcsssublimetext3font-family