Hide scrollbar and svg height issue in ie11

Question

I have svg logos in the footer of my web page and they are working fine in firefox and chrome but ie11 is displaying the max height of the svg's without respecting the aspect ratio for the witdh I gave the svg's in css.

<div id="footer">                   
    <div id="logos">
        <div id="intel">
            <img src="images/logos/intel.svg" max-width="">
        </div>
...

#intel {
    width: 110px;
    margin: 25px 0 0 100px;
}

The position for the div's is absolute. I don't know if it's the right way to position the svg's in the footer. The only problem I had was trying to use a scroll plugin; Varon: I just included it in the header, added the css and called it from html, setting paramns, etc. It worked weird, the only thing displaying as scrollbar was the trackbar (or a full height scrollbar) and it was moving as the scrollbar and disapearing when reached the bottom... It created conflict with the footer svg's, when scrolling down there were nothing (empty footer) but if I resized the window the svg's just appeared and if I scrolled up they acted like position fixed, moving upside...

I'd like to know a good way to customize the scrollbar, cross browsers if possible, so it doesn't hide part of the design (the right side).

I read a lot of articles and tutorials, but the most parts were for a div, element, etc... but I need that for the whole page. Here's an example (cross browser) that scrolls without scrollbar: http://jsfiddle.net/nCvMc/

Why if I give overflow hidden to the first div insde body (class one) the scrollbar is not hidden? Only works in body and html.

This is the link: http://satspain.sytes.net/

Thanks.

EDIT: to fix the svg height problem in IE there's to set the height for the img element, not for the div container.

#intel img {
    height: 60px;
{

I don't know if it's best to delete the container and set the margin and size (height and width) of the img instead...

Answer 1

This is a working solution to hide the scrollbar in all browers and still be able to scroll. Just adding two extra parent divs to our page.

<body>
    <div class="one">
        <div class"two">
            web here (including header and footer)
        </div>
    </div>
</body>

Solution:

html {
    height: 100%;
    overflow-x: hidden;
}

body {
    height: 100%;
    width: 100%;
}

.one {
    height: 100%;
    width: 1920px;
    overflow: hidden;
}

.two {
    position: relative;
    height: 100%;
    width: 1940px;
    overflow-y: scroll;
    overflow-x: hidden;
}

Hide scrollbar and svg height issue in ie11

Question

1 answers

solution1
0 ACCPTED 2015-04-21 22:52:55

Hide scrollbar and svg height issue in ie11

Question

1 answers

solution1 0 ACCPTED 2015-04-21 22:52:55

solution1
0 ACCPTED 2015-04-21 22:52:55