Quiero agregar dos Div en la página, un Div para la parte superior, que es de solo lectura, el otro Div para la parte inferior, que es editable. Lo que quiero lograr es:
Aquí está el código que tengo:
<html> <body> <div> <div>Top Part</div> <div contenteditable="true">Click here to type</div> </div> </body> </html>En el código anterior, si hago clic en el Div inferior, podemos escribir, luego, si seguimos presionando Intro, mostrará la barra de desplazamiento vertical, pero si me desplazo, el Div superior también se desplazará hacia arriba, lo cual quiero para evitar.
Entonces, ¿cómo puedo hacer que la barra de desplazamiento solo se aplique a la división inferior?
La barra de desplazamiento actualmente se aplica a toda la ventana, por lo que todos los elementos de la página se desplazan hacia arriba y hacia abajo juntos. Una alternativa es hacer desplazable el área editable. Restrinja la altura de esa área y establezca su desbordamiento en "automático" o "desplazamiento".
.edit { max-height: 5em; overflow-y: auto; } <div> <div>Top Part</div> <div contenteditable="true" class="edit">Click here to type</div> </div> Puede evitar establecer una altura específica para el área desplazable utilizando la altura de la ventana como limitador. Un método es usar flexbox para que el área desplazable llene la altura restante de la ventana. Aquí hay un ejemplo . En su caso, el <body> puede ser el contenedor flexbox "externo".
En la demostración a continuación, <body> se divide en dos áreas: el área superior y un área inferior de "contenedor desplazable" que llena la altura restante de la ventana. El área inferior limita la altura máxima del área editable/desplazable.
También agregué una técnica de "marcador de posición" discutida aquí: Marcador de posición para div contenteditable .
html, body { margin: 0; } body { height: 100vh; display: flex; flex-direction: column; } .header { background-color: #EEF; } .scroll-container { flex: 1; min-height: 1em; } .scrollable { max-height: 100%; overflow-y: auto; } .header, .scrollable { padding: 0.5em; box-sizing: border-box; } [contenteditable=true]:empty:before { content: attr(data-placeholder); color: grey; font-style: italic; cursor: text; } <div class="header">Top Part</div> <div class="scroll-container"> <div contenteditable="true" class="scrollable" data-placeholder="Click here to type"></div> </div>Si quiere decir que desea que la parte superior siempre se pueda ver en la parte superior, puede usar position: sticky .
.sticky { font-size: 2em; position: sticky; top: 0; } [contenteditable=true] { border: 0.1em solid black; } <html> <body> <div> <div class="sticky">Top Part</div> <div contenteditable="true">Click here to type</div> </div> </body> </html>Podrías hacer algo como esto:
.scrollable{ overflow-y: scroll; max-height: 150px; } <html> <body> <div> <div>Top Part</div> <div class="scrollable" contenteditable="true">Click here to type</div> </div> </body> </html>