A.Casa A.Casa - 4 months ago 7
CSS Question

Positioning a div at the bottom of the page issue

i am working on this website and as you can see i have this

<div class="bt-op-item-builder-content">...</div>
(i setted a green border) at the bottom of every single page.

This works on Chrome, Safari, Microsoft Edge but not on INTERNET EXPLORER 11.

How can i move it at the bottom also on Internet Explorer 11?

CSS:

.bt-op-item-content .builder-custom-op_bt_6641.bt-op-item-builder .bt-op-item-builder-content {
padding: 0px 0px 15px 0px;


}
Thanks in advice

PS: Some screens

Internet Explorer 11

Answer

If you update like this it will work

  • .btnav-container .bt-op-item .bt-op-item-builder's parent need to have position: relative so the absolute positioned element is relative to it

  • .btnav-container .bt-op-item .bt-op-item-builder need an absolute position for the bottom: 0px !important to work

  • .btnav-container .bt-op-item .bt-op-item-builder need left: 0 or else it start of screen

Updated CSS rules

.btnav-container[data-fullscreen-scroll=yes] .bt-op-item .fp-tableCell .bt-op-item-content {
    min-height: 100%;
    position: relative;          /*  added    */
}

.btnav-container .bt-op-item .bt-op-item-builder {
  display: block;
  position: absolute;            /*  changed  */
  left: 0;                       /*  added    */
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0;
}