Como o DiggBar redimensionar dinamicamente a altura de sua iframe com base no conteúdo e não em seu domínio?
Pergunta
Alguém já perguntou: Como funciona o DiggBar? em uma pergunta anterior .
Enquanto alguém forneceu uma resposta decente que não abordou uma coisa:
Como o Digg redimensionar dinamicamente a sua altura iframe de, com base no conteúdo de um site em um domínio diferente?
Há uma abundância de perguntas e respostas aqui no SO para ajustar dinamicamente uma altura iframe baseado fora de conteúdo (usando javascript) contanto que o url moldado é em seu próprio domínio. No entanto, Digg parece ter resolvido este problema com sites de qualquer domínio.
Faça qualquer SO programadores web tem alguma idéia de como eles conseguiram isso?
Nota: O iframe não é simplesmente definida como altura de 100%. A tag iframe simplesmente não funciona assim. Google "altura de 100% iframe" e você verá o que quero dizer.
Solução
Se você olhar para sua CSS , eles usam height: 100%
para o iframe
:
iframe#diggiFrame {
color: #666;
width: 100%;
height: 100%;
z-index: 10;
-webkit-box-sizing: border-box;
}
Eles posicionar o DiggBar acima que, com uma altura de 46px
, de modo que o leva iframe
100% do espaço restante. Eles usam overflow: hidden
no elemento body
para manter o iframe
inteiramente dentro da altura vertical da página, em vez de permitir a página para rolagem. Isto significa que a barra de rolagem aparecerá dentro da iframe
, em vez de para a página inteira. Note que a forma como o DiggBar faz isso só funciona no modo de peculiaridades no Firefox; veja abaixo como fazê-lo no modo de padrões.
body {
padding: 46px 0 0 0;
margin: 0;
background: #fff;
overflow: hidden;
color: #333;
text-align: left;
}
#t {
width: 100%;
min-width: 950px;
height: 46px;
z-index: 100;
position: absolute;
top: 0;
left: 0;
/* overflow: hidden; */
border-bottom: 1px solid #666;
background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
line-height: 1;
}
Editar : Para aqueles que não acreditam em mim, aqui é um pequeno exemplo . Para obtê-lo para preencher o espaço inteiro, você precisará configurá-lo para não ter nenhum fronteira, e você precisa <body>
não ter margens.
Editar 2 : Ah, desculpe, eu vejo o que você estava falando. Você precisa do overflow: hidden
na etiqueta body
para obter a barra de rolagem para trabalhar da maneira que quiser.
editar 3 : Parece que você tem que estar em peculiaridades modo para que isso funcione no Firefox; se você incluir uma declaração <!DOCTYPE html>
, que o coloca em modo de padrões, e seu iframe
sai muito pequeno.
editar 4 : Ah, você pode fazê-lo no modo de padrões no Firefox também. Tenho a resposta aqui . Você precisa definir a altura de suas <html>
e <body>
elementos para 100%
também. (Note que o <!DOCTYPE html>
é o doctype para HTML 5 , que é um trabalho em andamento; no entanto, ele funciona em todos os navegadores modernos para ligar o modo de padrões).
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
html, body {
height: 100%
}
body {
margin: 0;
overflow: hidden;
}
#topbar {
height: 50px;
width: 100%;
border-bottom: 1px solid #666
}
#iframe {
height: 100%;
width: 100%;
border-width: 0
}
</style>
</head>
<body>
<div id="topbar">
<h1>This is my fake DiggBar</h1>
</div>
<iframe id="iframe" src="http://www.google.com/"></iframe>
</body>
Outras dicas
Parte do problema com HTML você não pode apenas definir um elemento de qualquer coisa a altura de 100% e tê-lo ocupar todo o espaço da janela. Uma maneira de fazer isso é fazendo o corpo tem uma altura pixel da janela e qualquer coisa dentro do conjunto de corpo a 100% será o tamanho da janela.
Basicamente basta fazer um JavaScript que os laços para as janelas OnResize evento e tê-lo redimensionar o corpo para o tamanho da janela.
aqui está um exemplo que eu fiz usando jQuery
<script language="JavaScript" type="text/JavaScript">
$(window).resize(function() {
$('body').height(document.documentElement.clientHeight);
});
</script>
Com isso, você será capaz de definir um div ou mais elementos e tê-lo trabalhar em toda a altura da janela.
Um iframe pode ter altura de 100% no modo de peculiaridades. Digg consegue isso deixando de fora o tipo de documento.
O iFrame é no site do Digg com o site-alvo dentro, e não o contrário. O iFrame é definida como 100% de largura e altura.
100% em um iframe é um por cento de 100% do espaço pai declarado. Um exemplo é:
/* parent element */
html, body {
width: 100%;
height: 100%;
}
/* child element */
iframe {
width: 100%; /* this is truly 100%, try it out */
height: 100%; /* try it out */