iframe under divps footer

时间:2014-05-23 07:31:43

标签: css iframe footer

我的网站存在一些问题,其中主要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);
}

1 个答案:

答案 0 :(得分:0)

怎么样:

Fiddle

问题是你不能拥有top&amp;您bottom上设置iframe.dashboard属性,但您知道需要的偏移量 25px (从底部开始)加上 50px (来自顶部)所以你可以相应地偏移高度 75px

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