Online marketing & salg på webshops & websites

Svar: iFrame topbanner på website driller

Rasmus L. Knabe — Fri, 02 Aug 2013 13:12:19 GMT

Du sakl så lige fjerne "top:61px" fra din iframe også :)

Svar: iFrame topbanner på website driller

Rasmus L. Knabe — Fri, 02 Aug 2013 12:55:38 GMT

Du har en header der fylder 60 pixel i højden, og dernæst en iFrame der fylder hele højden... Der er selvfølgelig ikke plads til 100% + 60px inde i vinduet, og de nederste 60px af iframen kommer derfor til at stikke ud i bunden... Normalt ville de sidste 60px komme til synes når du havde scrollet til bunden af iFramen hvorefter body så ville scrolle de sidste 60, men da du har sat overflow: hidden; på body taget sker dette ikke (og det ville også være grimt).

Løsning:

Tilføj en div om din iFrame og giv den følgende css:

div#wrapper{

position: absolute;
top: 60px;
right: 0;
bottom: 0;
left: 0;

}

Det ovenstående gør er basalt at lave en div som er 100% bred, og 100% minus 60px høj :)

Svar: iFrame topbanner på website driller

Jonas Krogslund — Fri, 02 Aug 2013 12:48:25 GMT

Hvad er det som gør de sidste pixels vises - for jeg kan ikke umiddelbart løse problemet :/

Svar: iFrame topbanner på website driller

Rasmus L. Knabe — Fri, 02 Aug 2013 12:39:41 GMT

På det link du postede i første indlæg oplever jeg stadig problemet!?

Svar: iFrame topbanner på website driller

Jonas Krogslund — Fri, 02 Aug 2013 12:33:01 GMT

Mange tak Rasmus.

Det ser ud til at virke nu :-)

Svar: iFrame topbanner på website driller

Rasmus L. Knabe — Fri, 02 Aug 2013 11:56:52 GMT

Tjekkede lige mit link og det ser ud til at der er noget galt, så du får lige koden her:

HTML:

CSS:

body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

header{
width: 100%;
height: 70px;
background: #333;
}

div{
width: 100%;
position: fixed;
top: 70px;
right: 0;
bottom: 0;
left: 0;
}

iframe{
border: none;
margin: 0;
padding: 0;
}

Svar: iFrame topbanner på website driller

Rasmus L. Knabe — Fri, 02 Aug 2013 11:53:57 GMT

Du har dog stadig et lille problem. I og med at iFramen er sat til en højde på 100% men er rykket ca. 70px ned fra toppen, ryger de nederste 70px af iframen ud af vinduet i bunden og er ikke synlige.

Tag et kig på det lille kodeforslag jeg lavede længere oppe i tråden - der er taget højde for ovenstående :)

Svar: iFrame topbanner på website driller

Jonas Krogslund — Thu, 01 Aug 2013 19:57:51 GMT

Tusind mange gange tak Emil, du er for sej!

Svar: iFrame topbanner på website driller

Emil Kjær Eriksen — Thu, 01 Aug 2013 19:47:08 GMT

Tilføj:

#ifrContent {

height: 100%;

}

Virker ved mig :)

Svar: iFrame topbanner på website driller

Jonas Krogslund — Thu, 01 Aug 2013 19:44:19 GMT

Tusind mange gange tak for svar begge to, det er helt kanon!

Jeg har nu fået det til at virke ved hjælp af overflow:hidden; - men hele siden/højden vises bare ikke. Dvs. det ligner ikke iframe viser 100% i højden. I kan se hvad jeg mener her: http://www.miviio.dk/beta/test/test.html

- Nogle af jer der ved hvordan jeg løser dette problem?

Svar: iFrame topbanner på website driller

Rasmus L. Knabe — Thu, 01 Aug 2013 13:35:14 GMT

Umiddelbart ville jeg nok selv gå med et layout noget ala dette:

http://codepen.io/anon/pen/hcBft

Svar: iFrame topbanner på website driller

Rasmus L. Knabe — Thu, 01 Aug 2013 13:14:30 GMT

Du kan også bare tilføje:

body{

overflow:hidden;

}

Svar: iFrame topbanner på website driller

Emil Kjær Eriksen — Thu, 01 Aug 2013 13:09:54 GMT

Tilføj det her til #divMenu:

#divMenu {
position: fixed;
z-index: 1;
}

Svar: iFrame topbanner på website driller

Jonas Krogslund — Thu, 01 Aug 2013 12:37:31 GMT

Jeg er klar over jeg ikke bare må sætte et websitet ind, som jeg ikke har fået godkendelse fra. Dette er blot en test :-)

iFrame topbanner på website driller

Jonas Krogslund — Thu, 01 Aug 2013 12:36:04 GMT

Hej alle sammen.

Jeg søger lidt hjælp til at få mit topbanner på mit iframe til at følge hele vejen ned til bunden af sitet og med op igen. Det følger fint med indtil man når bunden og kører op, så forsvinder det. Hvad kan jeg gøre for at fixe dette problem?

Du kan se mit eksempel her