我的网站存在一些问题,其中主要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©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);
}
答案 0 :(得分:0)
怎么样:
问题是你不能拥有top
&amp;您bottom
上设置iframe.dashboard
属性,但您知道需要的偏移量 25px (从底部开始)加上 50px (来自顶部)所以你可以相应地偏移高度 75px 。