height: 100% for inside with display: table-cell

by

When you use % for setting heights or widths, always set the widths/heights of parent elements as well:

.table {
    display: table;
    height: 100%;
}

.cell {
    border: 2px solid black;
    vertical-align: top;
    display: table-cell;
    height: 100%;
}

.container {
    height: 100%;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}
<div class="table">
    <div class="cell">
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

More Related Contents:

  1. Equal height columns with CSS
  2. How to apply CSS page-break to print a table with lots of rows?
  3. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
  4. using text-align center in colgroup
  5. What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?
  6. space between divs – display table-cell
  7. overflow:scroll; in
  8. How are `display: table-cell` widths calculated?
  9. Responsive tables, the smart way
  10. Why do Firefox and Opera ignore max-width inside of display: table-cell?
  11. CSS Cell Margin
  12. CSS way to horizontally align table
  13. Why does flex-box work with a div, but not a table?
  14. Border around specific rows in a table?
  15. CSS making two divs equal height with display table
  16. Browser is not displaying images
  17. How can I select an element with multiple classes in jQuery?
  18. Why is there an unexplainable gap between these inline-block div elements? [duplicate]
  19. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  20. Grid properties not working on elements inside grid container
  21. Is element block level or inline level?
  22. Maintain the aspect ratio of a div with CSS
  23. How do I give text or an image a transparent background using CSS?
  24. Border length smaller than div width?
  25. How to determine height of content-box of a block and inline element
  26. Can a ::before selector be used with a ?
  27. Selecting the last element among various nested containers
  28. Media queries not working inside an iframe
  29. bootstrap 4: center inline form inside a jumbotron
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment