cómo hacer un div de pantalla completa y evitar que el contenido se modifique?

para mi aplicación web, me gustaría que el div principal sea de pantalla completa (tanto ancho como alto = 100%), e independientemente del contenido, quiero que se mantenga en ese tamaño. eso significa que, si no hay mucho contenido, no debería reducirse, y si hay demasiado contenido, no debería presionar a este div principal.cómo hacer un div de pantalla completa y evitar que el contenido se modifique?

¿cómo puedo hacer esto?

(estoy bien con los cortes aplicados a este div, con tal de que se mantenga el contenido Hack-libre)

Fuente

2010-07-18 throwaway007

Utilice el código HTML

<div id="full-size"> 
    <div id="wrapper"> 
     Your content goes here. 
    </div> 
</div>

y utilizar el CSS:

html, body {margin:0;padding:0;height:100%;} 
#full-size { 
    height:100%; 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    overflow:hidden; 
} 
#wrapper { 
    /*You can add padding and margins here.*/ 
    padding:0; 
    margin:0; 
}

Asegúrese de que el HTML se encuentre en el elemento raíz.

Espero que esto ayude!

Fuente

2010-07-18 16:09:15 mattbasta

Se necesita algo de javascript para realizar maximizar la ventana del navegador. –

gracias, esto funciona bien, excepto un problema: - si un elemento está empujando la envoltura (porque tiene 100% de altura), la altura de la envoltura excede la pantalla, resulta en desbordamiento. si elimino el 100% de altura del elemento, entonces no rellena el envoltorio. – throwaway007

@ throwaway007: He actualizado el código. ¡Échale un vistazo ahora! – mattbasta

O incluso:

<div id="full-size"> 
    Your contents go here 
</div>

html,body{ margin:0; padding:0; height:100%; width:100%; } 
#full-size{ 
    height:100%; 
    width:100%; 
    overflow:hidden; /* or overflow:auto; if you want scrollbars */ 
}

(html, el cuerpo se puede configurar para recibir .. 95% -99% o algo así para tener en cuenta ligeras inconsistencias en los márgenes, etc.)

Fuente

2010-07-18 16:17:59 lucideer

hey this working fine me :) –

Esto no es para mí. (firefox) –

@ TomášZato: Debería funcionar bien en Firefox. He estado usando el mismo método con Firefox durante años. – TheCarver

<html> 
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;"> 

</div> 
</html>

Fuente

2010-07-18 16:18:00 Bob

#fullDiv { 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    overflow: hidden; /* or auto or scroll */ 
}

Fuente

2010-07-18 16:29:19 Robusto

Los descriptores 'right: 0' y' bottom: 0' son innecesarios; anularán los descriptores 'top' y' left'. Esto solía tenerme todo el tiempo; CSS no es como Windows Forms o XAML a este respecto. – mattbasta

@mattbasta: Mejor revise su trabajo nuevamente entonces. Utilizo esto en FF 3.6, Safari e IE y funciona muy bien en los tres. Es la forma en que hago una "ventana de escudo" transparente para los diálogos popin modales. – Robusto

@mattbasta: Ah, y olvidé mencionar Chrome y Opera. – Robusto

Aviso cómo la mayoría de estos sólo pueden ser utilizados sin un DOCTYPE. Estoy buscando la misma respuesta, pero tengo un DOCTYPE. Hay una manera de hacerlo con un DOCTYPE Sin embargo, a pesar de que no se aplica al estilo de mi sitio web, pero funcionará en el tipo de página que desea crear:

div#full-size{ 
    position: absolute; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    overflow:hidden;

Ahora, esto era mencionado anteriormente, pero solo quería aclarar que esto normalmente se usa con un DOCTYPE, altura: 100%; sólo funciona sin un DOCTYPE

Fuente

2012-06-27 17:16:18

#fullDiv { 
    height: 100%; 
    width: 100%; 
    left: 0; 
    top: 0; 
    overflow: hidden; 
    position: fixed; 
}

Probado en putlocker: http://stylebot.me/styles/4035

Fuente

2013-11-16 18:57:14 JumpLink

cómo hacer un div de pantalla completa y evitar que el contenido se modifique?

Respuesta

Cuestiones relacionadas