0

I have found tons of topics about this, but nothing seems to work out.

My website consists of a main div, with all the content that takes 80% of the screens width. A div with a background is sticked to each side of the div, with a absolute position, like so:

Example of what I mean

Now, the side divs have an background-repeat: repeat-y style applied to it. The height of the html is 100%, and what I want works in all browsers, EXCEPT IN INTERNET EXPLORER (even in Edge, but I understood that it processes HTML and CSS differently from IE) (frustrations, sorry).

The code:

.bg-left {
    background: transparent url("../images/background/bg_left.png");
    background-repeat: repeat-y;
    position: absolute;
    min-height: 100%;
    width: 100px;
    top: 0;
    left: -100px;
}

.bg-right {
    background: transparent url("../images/background/bg_right.png");
    background-repeat: repeat-y;
    position: absolute;
    min-height: 100%;
    width: 100px;
    top: 0;
    right: -100px;
}

Is there somebody who can help me out?

Thanks in advance

-- JSFIDDLE --

https://jsfiddle.net/fwah7gr6/12/

So, this is the context of my website. There a 'banners' on each side of the website, but what happens in IE, is that those banners stop repeating after you scroll down (it seems like those banners take the height of the screen and not the parent (which is 100% in height). In the JSFiddle this of course works, because that would be normal behaviour. Let's say the page-wrapper has an height of 4000px in total, the banners only take the height of from the top to the bottom of screen height. When I open a console, and push the console up, the banners also get pushed up...

4

1 回答 1

0

Okay, somehow the framework (Magento 2) I was working in was the problem. I did not know this would be a Magento issue, until I saw that Magento adds a .ie10 and .ie11 wrapper around the content with height: 100%. Thanks to @Suresh Ponnukalai, which used height: auto, I was able to fix the problem.

My excuses for not mentioning I was working with Magento 2, but I assumed this was pure a HTML/CSS + IE issue.

于 2018-03-08T08:16:20.420 回答