1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Ayuda con la propiedad overflow:scroll

Tema en 'HTML y CSS' comenzado por hask, 1 de Enero de 2017.

  1. hask

    hask Miembro

    Se incorporó:
    26 de Noviembre de 2015
    Mensajes:
    32
    Me gusta recibidos:
    2
    Puntos de trofeos:
    8
    Género:
    Hombre
    Ocupación:
    estudiante
    Hola a todos primero que nada aqui esta mi código, perdon si tiene errores pero soy principiante.. abajo dejare captura de como es el codigo .. vean primero el codigo y luego les explico mi problema
    HTML:
     <!DOCTYPE html>
    <html lang="es">
    <head>
    <title>messenger</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
    * {
      padding:0px;
      margin:0px;
      text-decoration:none;
      box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
    }
    body {
      background:#fff;
      color:#333;
      font-size:15px;
      max-width:900px;
      width:100%;
      margin:auto;
    }
    /* menu */
    header {
      background:#45576f;
      color:#fff;
      padding:9px 5px;
      overflow:hidden;
    }
    .logotipo {
      color:#fff;
      font-family: 'Sigmar One';
      padding:5px 7px;
      display:inline-block;
      float:left;
    }
    a.option {
      background:#fff;
      border-radius:3px;
      text-align:center;
      padding:5px 7px;
      margin:2px;
      color:#45576f;
      float:right;
      font-size:14px;
      display:inline-block;
    }
    /* diseño del chat */
    .mss-content {
      background:#fff;
      padding:5px 8px;
      margin:auto;
    /* el scroll no funciona si no le pongo un height */
      overflow: scroll;
      width:100%;
      border: 1px solid #ddd;
      background: #f1f1f1;
      overflow: scroll;
    }
    .user_one {
      background:#84848c;
      color:#fff;
      padding:10px 7px;
      text-align:right;
      font-size:14px;
      border-radius:2px;
      margin:3px;
    }
    .user_two {
      background:#1995d5;
      color:#fff;
      padding:10px 7px;
      text-align:left;
      font-size:14px;
      border-radius:3px;
      margin:2px;
    }
    .hour_one {
      color:#fff;
      display:block;
      font-size:13px;
      text-align:right;
      padding-top:6px;
    }
    .hour_two {
      color:#fff;
      display:block;
      font-size:13px;
      text-align:left;
      padding-top:6px;
    }
    .ok {
      width:100%;
      height:100%;
      position:fixed;
    }
    .inbox {
      background:#fff;
      width:100%;
      color:#333;
      border-top:1px solid #ddd;
      position:fixed;
      bottom:0px;
      left:0px;
      z-index:2;
    }
    textarea {
      background:#fff;
      color:#333;
      padding:6px 7px;
      border:none;
    }
    </style>
    </head>
    <body>
    <div class="ok">
    <header>
    <div class="logotipo">LOGOTIPO</div>
    <a href="#" class="option">Perfil</a>
    <a href="#" class="option">Inicio</a>
    </header>

    <div class="mss-content">
    <div class="user_one">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus.
    <div class="hour_one">hace 3 minutos</div>
    </div>

    <div class="user_two">
    Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit.
    <div class="hour_two">hace un momento</div>
    </div>
    <div class="user_one">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus.
    <div class="hour_one">hace 3 minutos</div>
    </div>
    <div class="user_two">
    Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit.
    <div class="hour_two">hace un momento</div>
    </div>
    <div class="user_one">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus.
    <div class="hour_one">hace 3 minutos</div>
    </div>
    <div class="user_two">
    Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit.
    <div class="hour_two">hace un momento</div>
    </div>
    </div>
    <!-- caja -->
    <div class="inbox" id="midiv">
    <div class="caja">
    <textarea rows="1" maxlength="2000" placeholder="Escribe un mensaje"  style="width:100%;resize:none;margin-top:5px" required"></textarea></div>
    </div>
    </div>
    </body>
    </html>
    si notan el div con la clase ok encierra todo el contenido con un width y height de 100% y una posicion fixed .. mas el menú y el div con el textarea hasta ahí todo bien el problema es el height del div .mss-content que necesita de una altura para que funcione el scroll ..si le pongo auto no funciona y realmente no se que hacer para que el div se ajuste entre el menú y el div con textarea .. no se si me entendieron? ? ayuda por favor! !!!
    PD: es un código para movil.
    Ver adjunto 1516
     

    Archivos adjuntos:

    Última modificación: 1 de Enero de 2017
  2. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    317
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    El código no se entiende, edita el post, y pon el código con la opción que te da el editor.
     
  3. hask

    hask Miembro

    Se incorporó:
    26 de Noviembre de 2015
    Mensajes:
    32
    Me gusta recibidos:
    2
    Puntos de trofeos:
    8
    Género:
    Hombre
    Ocupación:
    estudiante
    bueno ya esta?!
     
  4. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    585
    Me gusta recibidos:
    442
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Bueno mas que nada te recomiendo la página http://www.w3schools.com/ para que puedas apoyarte y ser mejor.. .
    Una observación mencionas que estas comenzando pero trata de no repetir las mismas propiedades css de una clase por ejemplo esta clase cual muestra tu error.
    Código (CSS):

    .mss-content {
    background:#fff;  // Esta se encuentra repetida color de fondo ponlo al final
    padding:5px 8px;
    margin:auto; // la posición margin solo se usa cuando utilizas un width o height menos de 100%

    /* el scroll no funciona si no le pongo un height */

    overflow: scroll;  // REpites el overflow
    width:100%;   // debe de ir al principio no es necesario un margin con esta propiedad
    border: 1px solid #ddd;
    background: #f1f1f1;  // REPETIDO
    overflow: scroll; // REPETIDO
    }
    para solucionar utilice un height 100% y auto en overflow y elimina los repetidos.

    Quedará así como quieres... NOTA: elimina los siguientes elementos del body en página completa web se pierde la vista de lo botones...
    /*max-width:900px;*/
    /*margin:auto;*/

    chatmovil.jpg
     
    A AngelKrak le gusta esto.
  5. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    317
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Sep. Si vas a compartir o pegar código, no lo pegues así no más.
     
  6. hask

    hask Miembro

    Se incorporó:
    26 de Noviembre de 2015
    Mensajes:
    32
    Me gusta recibidos:
    2
    Puntos de trofeos:
    8
    Género:
    Hombre
    Ocupación:
    estudiante
    si lo siento .. no se publicar mucho por aqui por eso no me se los bbcode
     
  7. hask

    hask Miembro

    Se incorporó:
    26 de Noviembre de 2015
    Mensajes:
    32
    Me gusta recibidos:
    2
    Puntos de trofeos:
    8
    Género:
    Hombre
    Ocupación:
    estudiante
    muchas gracias revisare a ver si funciona y gracias por las criticas constructivas las tomare en cuenta!!
     
  8. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    585
    Me gusta recibidos:
    442
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    hay una opción que dice insertar y te mostrará una pequeña ventana y opciones de lenguajes ...
     
    A AngelKrak y hask les gusta esto.
  9. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.228
    Me gusta recibidos:
    548
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    entonces ya quedo solucionado o todavia no?o_O
     
  10. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    585
    Me gusta recibidos:
    442
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    No se el compañero dijo que iba checar la posible solución que mencione anteriormente jejeje....!! porque a mi me funciono como muestra la imagen
     
  11. hask

    hask Miembro

    Se incorporó:
    26 de Noviembre de 2015
    Mensajes:
    32
    Me gusta recibidos:
    2
    Puntos de trofeos:
    8
    Género:
    Hombre
    Ocupación:
    estudiante
    si bro me funciono :) ... queda como solucionado este tema
     
  12. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    585
    Me gusta recibidos:
    442
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    :rolleyes: Sale ;)... Pues animo Saludos...!!
     
    A hask le gusta esto.

Comparte esta página