Quiero que el CUERPO de mi página no sea desplazable pero un DIV dentro del CUERPO debe ser desplazable. tengo esto en mi archivo css:¿Cómo hacer un DIV desplazable en lugar de BODY?
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
pero no funciona y el DIV no se convierta en scrollabel (sólo muestra dos barras de desplazamiento con discapacidad para el DIV)!
.mainSection necesita tener un height. De lo contrario, el navegador no puede saber lo que debe considerar overflow.
¿Estás seguro de que se aplica el estilo para tu clase mainSection? Puede usar una herramienta como Web Developer o Firebug (para Firefox) para asegurarse de que el estilo se aplique correctamente. Además, si solo tiene una sección principal, es posible que desee utilizar una identificación en lugar de una clase. la etiqueta en html sería entonces <div id="mainSection"> en lugar de <div class="mainSection"> y el css se convierte en lugar de #mainSection { ... }.mainsection { ... }
Aquí está todo bien explicado
http://www.w3schools.com/css/pr_pos_overflow.asp Puede experimentar.
Tuve el mismo problema antes, pero pude resolverlo solo con overflow: auto;. Pruébalo y funcionará.
Actualizado
El código HTML se parece a esta
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
funciona perfectamente en cualquier navegador. Me probé en Chrome, IE, Safari, Mozilla y Opera