There are 3 blocks, in each there is a background substrate in the form of a separate div with the class card-cell-bg. In all browsers except IE11, this background stretches to its full height. How to deal with IE?

This appears because of the table-cell property. There is an option to assign a background to the table-cell blocks - but another problem comes out - this is the indentation between the cells of the table-cell

jsfiddle

html

<div class="card-table"> <div class="card-row"> <div class="card-cell"> <div class="card-cell-bg"></div> <img src="http://placehold.it/220x160/b91c3d/ffffff" alt="" class="src"> <div class="card-cell-body"> <a href="" class="link-details">«Lorem ipsum dolor sit amet, consectetur adipiscing elit</a> <p class="font-small card-cell-text">"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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> <div class="card-cell"> <div class="card-cell-bg"></div> <img src="http://placehold.it/220x160/b91c3d/ffffff" alt="" class="src"> <div class="card-cell-body"> <a href="" class="link-details">«Lorem ipsum dolor sit amet, consectetur adipiscing elit</a> <p class="font-small card-cell-text">"Lorem ipsum dolor sit amet, "</p> </div> </div> <div class="card-cell"> <div class="card-cell-bg"></div> <img src="http://placehold.it/220x160/b91c3d/ffffff" alt="" class="src"> <div class="card-cell-body"> <a href="" class="link-details">«Lorem ipsum dolor sit amet, consectetur adipiscing elit</a> <p class="font-small card-cell-text">"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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> </div>

scss

 .card-table { display: table; .card-row { display: table-row; } .card-cell-bg { position: absolute; width: 220px; top: 0; left: 20px; background-color: #f2f2f2; height: 100%; z-index: -1; } .card-cell { position: relative; display: table-cell; width: 260px; padding-left: 20px; padding-right: 20px; &:first-child, &:last-child { width: 220px; padding-left: 0; padding-right: 0; .card-cell-bg { @extend .card-cell-bg; left: 0; } } } .card-cell-body { padding: 15px 20px 25px 20px; } .card-cell-text { line-height: 15px; margin-top: 12px; margin-bottom: 0; } }

    1 answer 1

    The problem remained in the ie since the css 2.1 specification, where it was impossible to assign the percentage height of the element inside the cell.

    Make this background 9999 pixels high and cut off the face with overflow: hidden

     .card-table { width: 700px; display: table; } .card-table .card-row { display: table-row; } .card-table .card-cell-bg, .card-table .card-cell:first-child .card-cell-bg, .card-table .card-cell:last-child .card-cell-bg { position: absolute; width: 220px; top: 0; left: 20px; background-color: green; height: 9999px; z-index: -1; } .card-table .card-cell { position: relative; display: table-cell; width: 260px; padding-left: 20px; padding-right: 20px; overflow: hidden; } .card-table .card-cell:first-child, .card-table .card-cell:last-child { width: 220px; padding-left: 0; padding-right: 0; } .card-table .card-cell:first-child .card-cell-bg, .card-table .card-cell:last-child .card-cell-bg { left: 0; } 
     <div class="card-table"> <div class="card-row"> <div class="card-cell"> <div class="card-cell-bg"></div> <img src="http://placehold.it/220x160/b91c3d/ffffff" alt="" class="src"> <div class="card-cell-body"> <a href="" class="link-details">«Lorem ipsum dolor sit amet, consectetur adipiscing elit</a> <p class="font-small card-cell-text">"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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> <div class="card-cell"> <div class="card-cell-bg"></div> <img src="http://placehold.it/220x160/b91c3d/ffffff" alt="" class="src"> <div class="card-cell-body"> <a href="" class="link-details">«Lorem ipsum dolor sit amet, consectetur adipiscing elit</a> <p class="font-small card-cell-text">"Lorem ipsum dolor sit amet, "</p> </div> </div> <div class="card-cell"> <div class="card-cell-bg"></div> <img src="http://placehold.it/220x160/b91c3d/ffffff" alt="" class="src"> <div class="card-cell-body"> <a href="" class="link-details">«Lorem ipsum dolor sit amet, consectetur adipiscing elit</a> <p class="font-small card-cell-text">"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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> </div>