CSS 100% de altura, y luego desplazamiento DIV no página

Bien, así que todavía no he podido encontrar una pregunta con una respuesta, así que decidí hacer la mía.CSS 100% de altura, y luego desplazamiento DIV no página

Estoy tratando de crear un diseño 100% fluido, que técnicamente he hecho. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

PERO, lo que quiero hacer ahora, es hacer la página 100% en la altura ... Pero no quiero la página para desplazarse Quiero que el DIV interior para desplazarse.

Creo que en pocas palabras, quiero que detecte la altura de la pantalla de la ventana gráfica, vaya al 100%, y luego si el contenido es más largo que la pantalla, recorra el DIV específico, NO la página.

Espero que esto tenga sentido.

Gracias de antemano. Justin

Fuente

2010-04-28 Justin

probablemente mejor preguntar en DocType: http://doctype.com/ – teabot

<html> 
    <body style="overflow:hidden;"> 
    <div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0"> 
    </div> 
    </body> 
</html>

Eso debe hacerlo para un caso sencillo

creo que esto funcionará para su caso

<html> 
    <body style="overflow:hidden;"> 
     <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div> 
     <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div> 
     <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div> 
     <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div> 
    </body> 
</html>

este ejemplo le dará un encabezado y pie de página estáticos y permite que el navegador y el área de contenido sean desplazables.

Fuente

2010-04-28 17:00:54

John, su segundo ejemplo trabajaron increíble! Muchas gracias, he estado molestando con esto por mucho tiempo. Lo aprecio. – Justin

No hay problema. Me alegro de ayudar –

No funciona para mí en IE8 por alguna razón, tal vez el JQuery CSS –

maquillaje overflow:auto para el div

Fuente

2010-04-28 16:56:56

overflow: auto; en el estilo DIV Simplemente debe saber que el tamaño del div debe aumentar para que pueda mostrar las volutas en él. Si aumenta el tamaño de la página (que debería ser con style = "overflow: hidden;" en el cuerpo) no funcionará.

Fuente

2010-04-28 17:06:22

Por favor, edita esta respuesta para hacerlo un poco más legible. Luego póngalo en la parte superior del libro llamado 'Secretos consejos sobre la basura estrafalaria de los verdaderos ninjas de CSS' – Zlatko

Esta es una forma diferente de hacer esto con todos los paneles de ABS, se producirá un error en IE6, pero puede proporcionar la solución CSS para IE6 si que es un requisito:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Fluid Layout</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
<style rel="stylesheet" type="text/css"> 
    body { background-color:black; margin:0px; padding:0px; } 
    .pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px} 
    .headerBox { position:absolute; width:100%; height:50px; background-color:#333; } 
    .contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; } 
    .footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; }   
    .contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; } 
    .contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; }  
    .contentBoxLeft, 
    .contentBoxRight { overflow:auto; overflow-x:hidden; } 
</style> 
</head> 
<body>&nbsp; 
    <div class="pageBox"> 
     <div class="headerBox">Header</div> 
     <div class="contentBox"> 
      <div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div> 
      <div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div> 
     </div> 
     <div class="footerBox">Footer</div> 
    </div> 
</body> 
</html>

Fuente

2010-04-28 17:21:13 David

David, Awesome bud, eres el primero en usar la información que di, te agradezco que demuestres la implementación. Gracias, fue muy útil. – Justin

Si no lo hace quiere usar position: absolute (porque arruina su impresión si sus márgenes deben ser diferentes a todos los ceros) entonces puede hacerlo con un poco de JavaScript.

Configurar el cuerpo y div como para permitir que el div para desplazarse:

<body style='overflow:hidden'> 
    <div id=scrollablediv style='overflow-y:auto;height:100%'> 
    Scrollable content goes here 
    </div> 
</body>

Esta técnica depende de la div que tiene una altura establecida, y para ello se requiere de JavaScript.

Crear una función simple para restablecer la altura de la div desplazable

function calculateDivHeight(){ 
    $("#scrollablediv").height(window.innerHeight); 
}

Y luego llamar a esta función tanto en carga de la página y el cambio de tamaño.

// Gets called when the page loads 
calculateDivHeight(); 

// Bind calculate height function to window resize 
$(window).resize(function() { 
    calculateDivHeight(); 
}

Fuente

2016-06-14 23:16:10 Vincent

Puede probar esto:

<!DOCTYPE> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
 
<style rel="stylesheet" type="text/css"> 
 
    .modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;} 
 
    .bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;} 
 
    .btn{position:fixed;top:100px;left:100px;} 
 
</style> 
 
</head> 
 
<body style='padding:0px;margin:0px;'> 
 
\t <div class='bg' style='position:static'></div> 
 
\t <div class='modal' style='display:none'></div> 
 
\t <button class='btn'>toggle </button> 
 
</body> 
 
<script> 
 
\t var str='',count=200; 
 
\t while(count--){ 
 
\t \t str+=count+'<br>'; 
 
\t } 
 
\t var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'), 
 
\t btn=document.querySelector('.btn'),body=document.querySelector('body'); 
 
\t modal.innerHTML=str; 
 
\t btn.onclick=function(){ 
 
\t \t if(bg.style.position=='fixed'){ 
 
\t \t \t bg.style.position='static'; 
 
\t \t \t window.scrollTo(0,bg.storeTop); 
 
\t \t }else{ 
 
\t \t \t let top=bg.storeTop=body.scrollTop; 
 
\t \t \t bg.style.position='fixed'; 
 
\t \t \t bg.style.top=(0-top)+'px'; 
 
\t \t } 
 
\t \t modal.style.display=modal.style.display=='none'?'block':'none'; 
 
\t } 
 
</script> 
 
</html>

Fuente

2017-02-27 14:00:22

CSS 100% de altura, y luego desplazamiento DIV no página

Respuesta

Cuestiones relacionadas