Css iframe underlaps div页脚_Css_Iframe_Footer

Css iframe underlaps div页脚

css iframe

Css iframe underlaps div页脚,css,iframe,footer,Css,Iframe,Footer,我的网站有一些问题，主iframe（100%高度）位于页脚下方。这会导致页脚隐藏页面底部我假设我用我的代码做了一些非常奇怪或愚蠢的事情，我希望有人能看到我犯的错误 HTML: 那么：问题是您不能在iframe.dashboard上设置top和bottom属性，但您知道它需要的偏移量，即25px（从底部）加50px（从顶部），因此您可以相应地将高度偏移75px 请参阅：这成功了。指定顶部：50px，did高度：计算（100%-75px）；。 <html class="index"&g

我的网站有一些问题，主iframe（100%高度）位于页脚下方。这会导致页脚隐藏页面底部

我假设我用我的代码做了一些非常奇怪或愚蠢的事情，我希望有人能看到我犯的错误

HTML:

那么：

问题是您不能在

iframe.dashboard

上设置

top

和

bottom

属性，但您知道它需要的偏移量，即25px（从底部）加50px（从顶部），因此您可以相应地将高度偏移75px

请参阅：

这成功了。指定顶部：50px，did高度：计算（100%-75px）；。

<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>

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);
}