首页 > css > iframe under divps footer

iframe under divps footer (iframe underlaps div footer)

2014-05-23 cssiframefooter

问题

我的网站存在一些问题,主要的iframe(100%高度)在页脚下方。这会导致页面底部被页脚隐藏。

我假设我用我的代码完成了一些非常奇怪或简单的愚蠢的事情,我希望有人能看到我所犯的错误。

HTML:

<html class="index">
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="index.css" />
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Playfair+Display:900italic' rel='stylesheet' type='text/css'>

    <title>Title</title>

</head>
<body>
<div class="heading">Header text</div>
<iframe src="menu.php" name="list" class="menu"></iframe>
<iframe src="dashboard.php" name="dashboard" class="dashboard"></iframe>

<div class="footer">20&copy;14</div>
</body>
</html>

CSS:

body {
    margin: 0px 0px 0px 0px;
}

html.index {
    background: url(static/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    min-height: 100%;
}

html {
    position: relative;
    min-height: 100%;
}

div.heading {
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    font-style:italic;
    font-size:36px;
    color: #FFFFFF;
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    line-height: 50px;
}

div.footer {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #FFFFFF;
    width: 90%;
    height: 25px;
    position: fixed;
    bottom: 0px;
    left: 10%;
    background-color: rgba(0,0,0,0.6);
    text-align: right;
    line-height: 25px;
}

iframe.dashboard {
    border: 0;
    position: fixed;
    top: 50px;
    bottom: 25px;
    left:10%;
    min-height:100%;
    width:90%;
    overflow-y: scroll;
    opacity:0.8;
}

iframe.menu {
    border: 0;
    position: fixed;
    top: 50px;
    left: 0px;
    min-height: 100%;
    width: 10%;
    overflow-y: scroll;
    background-color: rgba(0,0,0,0.6);
}

解决方法

怎么样:

小提琴

问题是你不能设置一个top&a bottom属性,iframe.dashboard但你知道它需要的偏移量是25px(从底部)再加上50px(从顶部开始)所以你可以相应地将高度偏移75px

请参阅:http//css-tricks.com/a-couple-of-use-cases-for-calc/

问题

I'm having some issues with my site, where the main iframe (100% height) underlaps the footer. This causes the bottom of the page to be hidden by the footer.

I assume I've done something really odd, or plain stupid, with my code, and I hope someone can see the error that I have made.

HTML:

<html class="index">
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="index.css" />
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Playfair+Display:900italic' rel='stylesheet' type='text/css'>

    <title>Title</title>

</head>
<body>
<div class="heading">Header text</div>
<iframe src="menu.php" name="list" class="menu"></iframe>
<iframe src="dashboard.php" name="dashboard" class="dashboard"></iframe>

<div class="footer">20&copy;14</div>
</body>
</html>

CSS:

body {
    margin: 0px 0px 0px 0px;
}

html.index {
    background: url(static/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    min-height: 100%;
}

html {
    position: relative;
    min-height: 100%;
}

div.heading {
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    font-style:italic;
    font-size:36px;
    color: #FFFFFF;
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    line-height: 50px;
}

div.footer {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #FFFFFF;
    width: 90%;
    height: 25px;
    position: fixed;
    bottom: 0px;
    left: 10%;
    background-color: rgba(0,0,0,0.6);
    text-align: right;
    line-height: 25px;
}

iframe.dashboard {
    border: 0;
    position: fixed;
    top: 50px;
    bottom: 25px;
    left:10%;
    min-height:100%;
    width:90%;
    overflow-y: scroll;
    opacity:0.8;
}

iframe.menu {
    border: 0;
    position: fixed;
    top: 50px;
    left: 0px;
    min-height: 100%;
    width: 10%;
    overflow-y: scroll;
    background-color: rgba(0,0,0,0.6);
}

解决方法

How about:

Fiddle

The problem is you can't have a top & a bottom attribute set on your iframe.dashboard but you know the offset it needs to be which is 25px (from the bottom) plus 50px (from the top) so you can offset the height accordingly by 75px.

See: http://css-tricks.com/a-couple-of-use-cases-for-calc/

相似信息