Avatar billede d.kryger Praktikant
17. november 2011 - 12:00 Der er 4 kommentarer og
1 løsning

Div som fylder 100% - 30 pixel i bunden

Hej eksperter.

Jeg vil gerne have en side, hvor jeg har en iframe som fylder hele bredden og hele højden - dog minus 30 pixel i bunden, som jeg skal bruge til noget menu.

Jeg har prøvet at lave noget kode (se nedenfor), men de 30 pixel kommer først frem når man scroller. Kan nogen hjælpe med en bedre kode eller rette i min kode?

<!DOCTYPE html>

<html>

<head>
<title>Sidenavn</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
    body
    {
        background-color: #FFFFFF;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }

    div.body
    {
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
    }

    div.iframe
    {
        height: 100%;
        background-color: #FFFF00;
    }

    div.menu
    {
        background-color: #FF00FF;
        height: 30px;
    }
</style>
</head>

<body>

<div class='body'>
    <div class='iframe'><iframe style='width: 100%; height: 100%; border: 0;' src='side_som_skal_vises_i_iframe.html'></iframe></div>
    <div class='menu'>Menu</div>
</div>

</body>

</html>
Avatar billede d.kryger Praktikant
17. november 2011 - 12:15 #1
Har lige Google lidt mere og fundet denne kode, men skal "blot" have menuen liggende i bunden. Kan nogen hjælpe med dette?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
    *{margin:0px;padding:0px;overflow:hidden}
    div{position:absolute}
    div#header{top:0px;left:0px;right:0px;height:30px;background-color: #FFFF00;}
    div#wrapper{top:30px;left:0px;right:0px;bottom:0px;background-color: #FF00FF;}
    div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
    div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header">MENU</div>
<div id="wrapper"><iframe style='width: 100%; height: 100%; border: 0;' src='/data/panoramapictures/1/'></iframe></div>
</body>
Avatar billede vandrefuglen Juniormester
17. november 2011 - 12:22 #2
Prøv at tilføje nedenstående nedenstående ;-) 

  div.menu
    {
        background-color: #FF00FF;
        height: 30px;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        }
Avatar billede d.kryger Praktikant
17. november 2011 - 12:49 #3
Jamen, det er jo fantastisk! Læg et svar og jeg kaster nogle point efter dig :)
Avatar billede vandrefuglen Juniormester
17. november 2011 - 13:04 #4
Done ;-)
Avatar billede olebole Juniormester
17. november 2011 - 13:06 #5
<ole>

- eller:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    font: 0.9em verdana, arial, sans-serif;
}
iframe {
    width: 100%;
    height: 100%;
}
#myFrame {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 30px;
    background: red;
}
#bund {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 30px;
    background: yellow;
}
</style>
</head>
<body>

<div id="myFrame">
  <iframe src="blue.html" frameborder="0"></iframe>
</div>

<div id="bund"></div>

</body>
</html>



/mvh
</bole>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester