Adicionar IFrame fullscreen no site

Olá

Tudo bem?

Algumas vezes passamos pela necessidade de carregar conteúdo do site externo em nosso site. Uma das opções mais rápida é a de carregar um iframe fornecendo a URL do site desejado.

Mas em algumas situações gostaríamos de abrir a página na mesma aba ou em uma nova dentro de nosso dominio mas com o IFrame em fullscreen e inicialmente mesmo tendo só o IFrame na página e adicionando regras de tamanho de 100% de largura e altura ele não ocupa toda a tela.

Para resolver isto é muito simples.
Veja o exemplo abaixo:

<iframe style="border: 0; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%" src="www.algumaurlaqui.com"></iframe>

Simplesmente adicionando o estilo CSS:

border: 0; 
position:absolute; 
top:0; left:0; 
right:0; bottom:0; 
width:100%; 
height:100%

Você consegue fazer com que o IFrame ocupe toda tela.

Espero ter ajudado ;)

Até a próxima.

Comentários

Postagens mais visitadas deste blog

Dica: Extensão Indentar código VUE Visual Studio Code

Olá Por muitas é necessário um atalho para formatar o seu código fonte no editor de texto. Para formatação de HTML, CSS, JS e afins no visual studio code você pode utilizar o: HTML Snippets Mas esta extensão acima não formata arquivos de template .vue . Para formatar este tipo de arquivos é necessário instalar alguma outra extensão. Entre as que busquei a que faz o serviço da melhor forma atualmente utilizando o atalho alt+shift+f é o plugin ventur: Vetur Este plugin é muito bom mesmo. Facilitou bastante a formatação de fontes em templates .vue. É isso espero que ajude;)

C# :Removendo propriedades nulas ao serializar JSON

Olá Para serializar uma classe em formato JSON em c#,por muitas vezes é utilizado o pacote Newtonsoft . Em alguns momentos há a necessidade de serializar somente as propriedades que estiverem preenchidas no objeto, removendo assim as que estiverem nulas. Para isto você pode utilizar a propriedade NullValueHandling da classe JsonSerializerSettings . Segue exemplo: Até a próxima

Como criar componente dropdown com checkbox ASP.NET MVC

Neste post irei demonstrar a criação de um componente dropdown com checkbox para selecionar as opções desejadas. Para começar podemos criar uma classe estática para criar o componente que será utilizado numa página razor. public static class Extensions { public static MvcHtmlString DropdownCheckbox( this HtmlHelper helper, string placeholder, IEnumerable<SelectListItem> selectList, object htmlAttributes) { string items = "" ; string rodape = "" ; if (htmlAttributes == null ) { htmlAttributes = new { }; } var attributes = new ExpandoObject() as IDictionary< string , Object>; foreach (PropertyInfo property in htmlAttributes.GetType().GetProperties()) { attributes.Add(property.Name, property.GetValue(htmlAttributes)); } string idDropdown = "dr

Jozimar Back's codding blog

Pesquisar este blog