0
메인 iframe (100 % 높이)이 바닥 글 밑에있는 내 사이트에 문제가 있습니다. 이렇게하면 페이지 하단이 바닥 글에 의해 숨겨집니다.iframe underlaps div footer
나는 정말로 이상한, 또는 바보 같은 코드를 작성했다고 추측합니다. 누군가가 내가 만든 오류를 볼 수 있기를 바랍니다.
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);
}
이 트릭을했다. 지정된 상단 : 50 픽셀 및 높이 : calc (100 % - 75 픽셀). – arvesynd