6 

a:hover{
    cursor:url(files/link.cur),progress;
}

body{
    width:80%;
    background-color:rgba(255,255,255,0.75);
    margin:auto;
    height: 100%;
    min-height: 100%;
}

html{
    Background-color:#8888FF;
    background-image:url(files/bg.jpg);
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    height:100%;
}

html, body{
    cursor:url(files/cursor.cur),progress;
}

iframe{
    overflow:hidden;
    height:80%;
    width:100%;
    border-width:1px;
}

img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:90%;
}

p{
    margin-right:10px;
    margin-left:10px;
    text-align:center;
    font-family:calibri;
    font-size:16px;
}

#menu a{
    display:inline-block;
    background-color:#0066FF;
    text-decoration:none;
    font-family:calibri;
    color:#FFFFFF;
    padding:10px 10px;
} 

#menu a:hover{
    background-color:#00AAFF;
}

a.active{
    background-color:#0088FF !important;
}

a.active:hover{
    background-color:#00AAFF !important;
}
<!DOCTYPE html>
<html>
    <head>
        <title>
            Foto's
        </title>
        <link rel="icon" type="image/png" href="files/icon.png">
        <link rel="stylesheet" href="style.css">
        <script src="files/javascript.js">
        </script>
    </head>
    <body onload="start()">
        <br>
        <div id="menu">
            <p style="font-size:20px;">
                <a href="index.html">
                    Welkom
                </a><a href="agenda.html">
                    Agenda
                </a><a href="fotos.html">
                    Foto's
                </a><a href="contact.html">
                    Contact
                </a>
            </p>
            <p style="font-size:16px;">
                <a onclick="go('camera/1993-1994.html', this)">
                    1993-1994
                </a><a onclick="go('camera/1994-2003.html', this)">
                    1994-2003
                </a><a onclick="go('camera/2003-2004.html', this)">
                    2003-2004
                </a><a onclick="go('camera/2005-2006.html', this)">
                    2005-2006
                </a><a onclick="go('camera/2006-2007.html', this)">
                    2006-2007
                </a><a onclick="go('camera/2007-2008.html', this)">
                    2007-2008
                </a><a onclick="go('camera/2008-2009.html', this)">
                    2008-2009
                </a><a onclick="go('camera/2009-2010.html', this)">
                    2009-2010
                </a><a onclick="go('camera/2011-2012.html', this)">
                    2011-2012
                </a><a onclick="go('camera/2013-2014.html', this)">
                    2013-2014
                </a><a onclick="go('camera/2014-2015.html', this)" id="one">
                    2014-2015
                </a>
            </p>
        </div>
        <iframe id="iframe">
        </iframe>
    </body>
</html>

I've set the height of the iframe to 80% but it doesn't work. It did work when the height of the body was set to 100% but I'm now using min-height and this problem developed. Also, I can't center the iframe using margin-left and margin-right:auto;. Does anyone know why the CSS properties are not working and how to fix it?

Thank you very much!

Improve this question
1
  • If you wonder why I didn't put the centering problem in the title; I didn't want the title to be too long and it also isn't that important.
    – Jaïr Paalman
    Commented Apr 19, 2015 at 14:12

1 Answer 1

Reset to default
4

This quote gives a very clear explanation about the height inheritance :

When you use a percentage value for height, it will always be relative to the specified height of the parent element. Not the actual height of the parent element, but the height specified in CSS.

So when your body element has no height specified (only min-height, but that does not count), the 100% will not be able to take effect.

https://stackoverflow.com/a/20681480/3168107

There isn't an easy fix (I definitely searched) for this that will allow minimum height but also make the elements adapt to screen overflow when using html and body without the top level having absolute dimensions. So this would be the easiest alternative :

iframe {
height: 80vh;
}

No need to set any height on either root element this way...

Another option would be to give the iframe absolute positioning. Without a positioned parent it will revert to the height of the viewport. It's basically the same effect as above but has deeper browser support (all modern browsers have been supporting it for a while though). On the other hand, not using absolute positioning is semantically more correct and gives better page flow.

Using display: table is a possibility as well because height is treated as minimum height for table elements but that would be the hackiest of the approaches.

The margin issue can be solved by setting the style to display: block or giving the parent a text-align: center. The iframe is an inline element...

http://codepen.io/anon/pen/dobdYZ?editors=110

Improve this answer
6
  • I'm sorry, But your solution for the height didn't work. I used height:100%; on the html and height:100%;min-height:100%; on the body. The page doesn't strech if necessary, it behaves like I didn't set the min-height but only the height.
    – Jaïr Paalman
    Commented Apr 19, 2015 at 16:48
  • I've adjusted the snippet with your solution. Could you please have a look and see what's wrong?
    – Jaïr Paalman
    Commented Apr 19, 2015 at 16:58
  • Sure, let me see what going on. I'll update the answer.
    – Shikkediel
    Commented Apr 19, 2015 at 17:03
  • No problem, admittedly it's throwing me a curve ball (some of it is new to me or at least different from what I thought the behaviour was) but I've left a quick alternative fix. I'll check a bit more.
    – Shikkediel
    Commented Apr 19, 2015 at 17:25
  • Do you know a place where I can get an easy explanation of the viewport scale (vw and vh)? It seems to work really well.
    – Jaïr Paalman
    Commented Apr 19, 2015 at 17:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.