2014-05-23 2 views
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&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); 
} 

답변

0

방법에 대해 :

Fiddle

문제는 당신이 top & bottom 속성에 설정할 수 없습니다입니다 너 iframe.dashboard 오프셋을 알아야합니다. 25px (하단부터) 50px (위에서부터) 75px에 따라 높이를 오프셋 할 수 있습니다.

은 참조 : http://css-tricks.com/a-couple-of-use-cases-for-calc/

+0

이 트릭을했다. 지정된 상단 : 50 픽셀 및 높이 : calc (100 % - 75 픽셀). – arvesynd