Modal con altura dinámica y footer

¡Hola!

Tengo una ventana con una altura dinámica y scroll. El problema es que el footer no se puede visualizar ya que la lista de datos ocupa toda la pantalla. Me gustaría ver siempre el footer.

¿Alguna idea?

Este es mi código css:

.own-modal { @media (min-height: 320px) { ion-backdrop { visibility: visible; } }

position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;

contain: strict; .modal-wrapper { &, .ion-page, .ion-page .content, .ion-page .content .scroll-content { contain: content; position: relative; top: auto; left: auto; } display: flex; overflow: auto; flex-direction: column; max-height: 100%; opacity: 0; height: auto; max-width: 100%; } }

El contenido de la ventana modal es muy sencillo. En el tag del content tengo un label y una lista y después tengo un footer con un div y dentro del div, un item con un botón.

Igualar altura columnas

quería preguntaros como puedo igualar la altura de dos columnas para que al verlo en diversos navegadores o en pantallas mas pequeñas (donde se hace un ajuste de tamaño) se vea en la misma proporción y no quede una columna mas alta que otra. Lo estoy haciendo en WordPress con DIVI y no acabo de encontrar la manera. Gracias.

Esta es la web: http://amercook.es/v3/ (no se si tengo que subir alguna cosa más ya que al no estar construyéndola directamente con código no se donde si tengo que ponerlo).

Expandir altura del elemento UL al desplegar submenú

Tengo una barra de navegación que, digamos, en su versión móvil, al pulsar en el botón de [MENÚ] aparece a modo de columna. Existe en la barra una última opción representada a modo de dropdown para desplegar otro submenú.

El UL que conforma el menú tiene un fondo de color de tono oscuro casi negro.

Lo que estoy queriendo lograr es que, en la versión móvil, tras desplegarse el menú principal una vez pulsado el botón de [MENÚ], cuando se despliegue el submenú, igualmente, se expanda la altura del UL y con ello, el fondo oscuro por debajo del submenú desplegado. Y no que quede ese submenú como si estuviera fuera del UL como ocurre ahora.

Aquí pongo el código de los archivos que entran en juego:

index.html

<!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">      <meta name="csrf-token" content="{{ csrf_token() }}">      <title>Barra de Menú :: Fija y Animada</title>      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">     <link href="css/app.css" rel="stylesheet">     <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/> </head> <body>     <div id="app">          <div class="barra-responsive">             <div class="logo">                 <img src="images/logo.png" alt="Logo">             </div>             <div class="menu">                 <h4>Menú</h4>             </div>         </div>          <nav>             <div class="logo">                 <img src="images/logo.png" alt="Logo">             </div>             <ul class="animated">                 <li><a href="#" class="active">Home</a></li>                 <li><a href="#">About</a></li>                 <li><a href="#">Services</a></li>                 <li><a href="#">Portfolio</a></li>                 <li><a href="#">Team</a></li>                 <li><a href="#">Contact</a></li>                 <li class="dropdown">                     <!-- <a href="#">Cuenta</a> -->                     <a class="dropdown-toggle" id="dropdownMenuButton" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Tu Cuenta">Cuenta</a>                     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">                         <a class="dropdown-item" href="#" title="Acceder al Perfil">Perfil</a>                         <a class="dropdown-item" href="#" title="Salir de la sesión">Logout</a>                     </div>                 </li>             </ul>         </nav>         <section class="sec1"></section>         <section class="content">             <h1>Lorem aliquip quis ullamco</h1>             <p>                 Mollit laborum nisi voluptate mollit ut proident deserunt nulla pariatur mollit occaecat cillum eiusmod eu. Officia commodo duis aliqua veniam consectetur. Laboris esse ex fugiat occaecat anim.                 Consequat minim dolore ipsum cupidatat sunt Lorem anim do incididunt proident sunt aute amet aliquip. Incididunt voluptate sunt voluptate sint irure cillum est est elit veniam tempor mollit enim. Esse eu veniam pariatur ipsum. Amet qui anim ea deserunt est aliqua aliqua occaecat elit veniam ullamco. Mollit id irure aliquip laborum laborum velit culpa deserunt amet ad eu. Ipsum id aliqua mollit voluptate. Labore fugiat exercitation excepteur excepteur occaecat duis consequat.                 <br><br>                 Culpa anim consequat minim occaecat cupidatat in quis esse. Ea mollit est veniam commodo culpa in laborum fugiat cupidatat reprehenderit nulla anim dolore et. Velit occaecat pariatur sit sit deserunt incididunt officia aute labore id sunt culpa. Ea ipsum occaecat aliquip reprehenderit proident nulla dolor esse do consectetur veniam nulla. In commodo excepteur id non cillum. Veniam nostrud do culpa sit cupidatat esse sit veniam sint excepteur Lorem sit.                 Aliqua consectetur veniam excepteur incididunt ad. Qui elit mollit qui dolore ipsum mollit. Anim eiusmod quis voluptate non sint cupidatat. Culpa consequat nostrud sit ipsum laboris irure proident esse. Excepteur mollit sunt labore amet esse nostrud nostrud Lorem commodo deserunt velit duis non. Cillum anim id nisi ex sunt consequat tempor tempor id incididunt sit.             </p>         </section>         <section class="sec2"></section>         <section class="content">             <h1>Adipisicing sit ex esse</h1>             <p>                 Mollit laborum nisi voluptate mollit ut proident deserunt nulla pariatur mollit occaecat cillum eiusmod eu. Officia commodo duis aliqua veniam consectetur. Laboris esse ex fugiat occaecat anim.                 Consequat minim dolore ipsum cupidatat sunt Lorem anim do incididunt proident sunt aute amet aliquip. Incididunt voluptate sunt voluptate sint irure cillum est est elit veniam tempor mollit enim. Esse eu veniam pariatur ipsum. Amet qui anim ea deserunt est aliqua aliqua occaecat elit veniam ullamco. Mollit id irure aliquip laborum laborum velit culpa deserunt amet ad eu. Ipsum id aliqua mollit voluptate. Labore fugiat exercitation excepteur excepteur occaecat duis consequat.                 <br><br>                 Culpa anim consequat minim occaecat cupidatat in quis esse. Ea mollit est veniam commodo culpa in laborum fugiat cupidatat reprehenderit nulla anim dolore et. Velit occaecat pariatur sit sit deserunt incididunt officia aute labore id sunt culpa. Ea ipsum occaecat aliquip reprehenderit proident nulla dolor esse do consectetur veniam nulla. In commodo excepteur id non cillum. Veniam nostrud do culpa sit cupidatat esse sit veniam sint excepteur Lorem sit.                 Aliqua consectetur veniam excepteur incididunt ad. Qui elit mollit qui dolore ipsum mollit. Anim eiusmod quis voluptate non sint cupidatat. Culpa consequat nostrud sit ipsum laboris irure proident esse. Excepteur mollit sunt labore amet esse nostrud nostrud Lorem commodo deserunt velit duis non. Cillum anim id nisi ex sunt consequat tempor tempor id incididunt sit.             </p>         </section>         <section class="sec3"></section>         <section class="sec4"></section>         <section class="sec5"></section>      </div><!-- /div #app -->      <!-- jQuery, Bootstrap, ... -->     <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>      <script type="text/javascript">         $  (window).on('scroll', function() {             if ($  (window).scrollTop()) {                 $  ('nav').addClass('estrechada');             } else {                 $  ('nav').removeClass('estrechada');             }         });         //Mostrando/Ocultando lista de enlaces de menú para casos de responsivo         /*$  (document).ready(function() {             $  ('.menu h4').click(function() {                 $  ('nav ul').toggleClass('active');             });         });*/         //************************************************************         $  (document).ready(function() {             $  ('.menu h4').click(function() {                 //$  ('nav ul').toggleClass('active');                 //---------------------------------------------                 if ($  ('nav ul').hasClass('fadeIn')) {                     // if the div has fadeIn class, remove it and add fadeOut                     $  ('nav ul').toggleClass('fadeIn').toggleClass('fadeOut')                 }                 else if ($  ('nav ul').hasClass('fadeOut')) {                     // if the div has fadeOut class, remove it and add fadeIn                     $  ('nav ul').toggleClass('fadeOut').toggleClass('fadeIn')                 } else {                     // if the div has neither of fadeIn nor fadeOut, add fadeIn class in                     $  ('nav ul').toggleClass('fadeIn')                 };             });         });         $  (window).bind('resize', function() {             console.log($  (this).width())             if($  (this).width() > 768){                 $  ('nav ul').removeClass('animated').removeClass('fadeOut')             }             else {                 $  ('nav ul').addClass('animated')             }         });     </script> </body> </html> 

app.css

@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Roboto:700);  /* :: PARTE PÚBLICA :: */  /* ********** Reset Styles ********** */  body {     margin: 0;     padding: 0;     font-family: sans-serif; }  /* ********** Bootstrap Styles ********** */  /* ********** Estilos Propios ********** */  nav {     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100px;     padding: 10px 100px;     box-sizing: border-box;     transition: 0.5s; }  nav.estrechada {     background-color: rgba(0, 0, 0, 0.8);     height: 80px;     padding: 10px 50px; }  nav .logo {     float: left; }  nav .logo img {     height: 80px;     transition: 0.5s; }  nav.estrechada .logo img {     height: 60px; }  nav ul {     float: right;     margin: 0;     padding: 0;     display: flex; }  nav ul li {     list-style: none; }  nav ul li a {     line-height: 80px;     /*misma medida que la asignada como altura al CSS de la IMG del logo*/     color: #262626;     padding: 5px 20px;     font-family: "Roboto", sans-serif;     text-transform: uppercase;     transition: 0.5s; }  nav.estrechada ul li a {     color: #fff;     line-height: 60px;     /*misma medida que la asignada como altura al CSS de la IMG del logo*/ }  nav ul li a.active, nav ul li a:hover, nav ul li.dropdown a:hover {     color: #fff;     background-color: #f00;     text-decoration: none; }  li.dropdown a.dropdown-toggle:hover {/**/     color: white; }  section.sec1 {     width: 100%;     height: 100vh;     background-image: url(../images/header-cielo-01.jpg?52aaab2203e2dca5be8142e603d77828);     background-size: cover; }  section.sec2 {     width: 100%;     height: 100vh;     background-image: url(../images/header-cielo-02.jpg?8ea857ffda8c2ffa533a095e958a6330);     background-size: cover; }  section.sec3 {     width: 100%;     height: 100vh;     background-image: url(../images/header-cielo-03.jpg?fbb4096c33a4b4c760892baaf3d5bdc0);     background-size: cover; }  section.content {     padding: 100px;     text-align: justify; }  section.content h1 {     margin: 0;     padding: 0;     font-size: 2em; }  section.content p {     margin: 20px 0 0;     padding: 0;     font-size: 1.1em; }  /* ********** Parte Responsive ********** */  .barra-responsive {     display: none; }  @media (max-width: 768px) {     .barra-responsive {         display: block;         width: 100%;         height: 60px;         background-color: #262626;         position: fixed;         top: 0;         left: 0;         padding: 5px 20px;         box-sizing: border-box;         z-index: 1;     }      .barra-responsive .logo img {         float: left;         height: 50px;     }      .barra-responsive .menu h4 {         float: right;         color: #fff;         margin: 0;         padding: 0;         line-height: 50px;         /*misma medida que la asignada como altura al CSS de la IMG del logo*/         cursor: pointer;         text-transform: uppercase;     }      nav,     nav.estrechada {         background-color: #262626;         height: 60px;         padding: 0;     }      nav .logo {         display: none;     }      nav ul {         position: absolute;         width: 100%;         top: 60px;         left: 0;         background-color: #262626;         float: none;         display: block;         opacity: 0;     }      nav ul.active {         display: block;     }      nav ul li {         width: 100%;     }      nav ul li a,     li.dropdown a.dropdown-toggle {/**/         display: block;         width: 100%;         padding: 0;         text-align: center;         line-height: 30px !important;         color: white;     }     .dropdown-menu {         width: 98%;         text-align: center;     } } 

Esto es un equivalente en el CodePen

Como saber si a un DIV ya no le caben más elementos dentro de él, teniendo en cuenta su altura?

Supongamos que tengo un div:

<div id="page1" class="contenedor-page" style="height: 1200px; width: 580px; overflow-y: hidden;"></div> 

Y dentro de ese div, voy añadiendo elementos, de la siguiente manera:

var templateText = `<div id="elemento-text1" class="elemento-editable">Marcador de texto</div>`;  $  ('#page1').append(templateText); 

Con el código de arriba voy añadiendo elementos dentro del DIV padre con la clase: 'contenedor-page', como utilizo la palabra reservada 'append' los elementos se van a ir agregando uno debajo del otro y así sucesivamente.

Tener en cuenta: Que el DIV padre con la clase 'contenedor-page' tiene una altura de 1200px, además de eso se le inhabilita el scroll Y, con el estilo: overflow-y: hidden.

Ahora: lo que quiero detectar, es que cuando ya no quepan más elementos dentro del DIV padre, es decir: como el DIV padre tiene 1200px altura y no tiene scroll, a medida de que yo vaya agregando elementos, pues estos se van a salir cuando alcancen la altura máxima del DIV padre, entonces quisiera saber cuando ya no quepan más elementos dentro de él, y pues hay mandar una alerta que diga que ya no caben mas elementos y que no permita agregarlos.

Solo quisiera saber como detectar cuando ya no quepan mas elementos dentro de un div padre, teniendo en cuenta su altura.

Espero me ayuden por favor, puede ser con Jquery o Javascript puro.

De antemano muchisimas gracias!

Ajustar varias listas a una sola altura

Tengo 4 <ul> las cuales tienen contenido disparejo, estoy tratando ha ajustar las 4 listas a un solo tamaño introducir la descripción de la imagen aquí

codigo html de la pagina y los estilos que le estoy agregando

#planes {padding-top:47px; background-color: rgba(208,207,207,1 	);}  .our_planes {padding:71px 0 78px; background-color: #fff}   span.separator{ 	border: 0; border-top: 1px solid #999; border-bottom: 1px solid #333; height:1px; padding:0; } ul li a.i1, ul li a.i2 { 	font-size: larger; 	font-weight: 600; } ul li.active a.i1, ul li.active a.i2  { 	border: 1.5px solid #059279 !important; 	border-bottom: #0000 !important; }    .sngl_pricing ul { /* border : #b4b4b4 solid 5px; */ margin : 0; padding : 0;transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s }  @media {  } .sngl_pricing ul li { color : #666666; font-family : sans-serif; font-size : 14px; list-style : none outside none; text-transform : capitalize; /* border-top : 2px solid #b4b4b4; */ padding : 7px 0; text-align : center;  font-weight: 550; } .sngl_pricing ul li:first-child { border-top : 0; }  .our_planes .nav-tabs{ 	border-bottom: 2px solid #105089; }  .our_planes .nav-tabs>li {     margin-bottom: -2px; 	}  .sngl_pricing { text-align : center; /* border : #b4b4b4 solid 5px; */ margin-bottom: 5px; } #web-dev .sngl_pricing:hover { border : #03c5c3 solid 5px;transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s } #social .sngl_pricing:hover { 	border : #7303a9 solid 5px;transition: all 1s ease 0s; }   .sngl_pricing > h2 { color : #fff; font-size : 20px; font-weight: 500; margin : 0; padding : 10px; text-transform : uppercase; /* background-color: #059279; */ /* background-image : url("../images/clean_code_bg.jpg"); */  }  .p_b_color{ 	 background-image: linear-gradient(to right bottom, #032bc5, #0064e5, #008ae5, #00a9d3, #03c5c3); 	background-color: none; } .s_b_color{ 	 background-image: linear-gradient(to left bottom, #7303a9, #6512b0, #541cb7, #3c24be, #032bc5); 	 background-color: none; }  div.ecommerce:hover { 	border-color: #008000; }  .sngl_pricing > h2.ecommerce { 		background-color: #008000; }  .title_bg_1 { background-image : url("../img/basic.jpg"); ba;ckground-position : center center; background-repeat : no-repeat; background-size : 100% 100%; } .title_bg_2 { background-image : url("../img/standar.jpg"); background-position : center center; background-repeat : no-repeat; background-size : 100% 100%; } .title_bg_3 { background-image : url("../img/extended.jpg"); background-position : center center; background-repeat : no-repeat; background-size : 100% 100%; } .sngl_pricing > h3 { background : none 0 0 repeat scroll #b4b4b4; color : #515050; font-size : 33px; margin : 0; padding : 20px 0; } .currency { font-size : 18px; position : relative; top : -18px; } .monuth { font-size : 24px; text-transform : none; } .btn.pricing_btn { background : none 0 0 repeat scroll #105089; border : #666666 solid 1px; color : #fff; text-transform : uppercase; padding : 10px 30px; }    .sngl_pricing ul { margin : 0; padding : 24px 0; } .sngl_pricing a { margin-top : 30px; }
<div id="web-dev" class="tab-pane fade in clearfix active">                       <h4 class="margtop20">Enlace su empresa a la web con nuestro servicio de desarrollo.</h4>                          <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">                           <div class="sngl_pricing">                             <h2 class="title_price p_b_color">Inicial</h2>                              <ul>                               <li>Plantilla Personalizada</li>                               <li>Hasta 3 páginas para contenido</li>                               <li>Nombre de dominio</li>                               <li>1000mb de hospedaje</li>                               <li>Integración de redes Sociales</li>                               <li>Responsive Design</li>                               <li>Formulario de Contacto</li>                               <li>Mantenimiento y Administración</li>                               <li >Publicación y Registro de la Web</li>                               <li>Correo Corporativo</li>                               <li>Publicación En Español</li>                                                              <li><a href="" class="margtopboton btn pricing_btn" data-toggle="modal" data-target="#p-i-form">Solicitar</a></li>                             </ul>                           </div>                       </div>                      <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">                         <div class="sngl_pricing">                           <h2 class="title_price p_b_color">Empresarial</h2>                           <ul>                             <li>Plantillas Personalizadas.</li>                             <li>8 páginas para contenido.</li>                             <li>Modulo de Registro.</li>                             <li>Nombre de dominio .com.ve</li>                             <li>2000mb de hospedaje.</li>                             <li>Integración de redes Sociales.</li>                             <li>Responsive Design.</li>                             <li>Formulario de Contacto.</li>                             <li>Mantenimiento y Administración.</li>                             <li>Publicación y Registro de la Web.</li>                             <li>Correo Corporativo.</li>                             <li>Autoadministrable.</li>                             <li>Publicación en Español.</li>                             <li><a href="" class="btn pricing_btn" data-toggle="modal" data-target="#p-e-form">Solicitar</a></li>                            </ul>                         </div>                       </div>                       <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">                         <div class="sngl_pricing">                           <h2 class="title_price p_b_color">Profesional</h2>                            <ul>                             <li>Plantillas Personalizadas.</li>                             <li>Multiples páginas para contenido</li>                             <li>Modulo administrativo y registro</li>                             <li>Nombre de dominio .com.ve</li>                             <li>3000mb de hospedaje</li>                             <li>Integración de redes Sociales</li>                             <li>Responsive Design</li>                             <li>Formulario de Contacto.</li>                             <li>Mantenimiento y Administración.</li>                             <li>Publicación y Registro de la Web.</li>                             <li>Correo Corporativo.</li>                             <li>Autoadministrable.</li>                             <li>Publicación En Ingles y Español.</li>                             <li><a href="" class="btn pricing_btn" data-toggle="modal" data-target="#p-p-form">Solicitar</a></li>                           </ul>                         </div>                     </div>                       <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">                           <div class="sngl_pricing ecommerce">                             <h2 class="title_price ecommerce">E-commerse</h2>                             <ul>                               <li>Plantillas Personalizadas.</li>                               <li> Sin limite de Productos.</li>                               <!-- <li>Modulo de Registro de Usuarios.</li> -->                               <li>Nombre de dominio .com.ve</li>                               <li>3000mb de hospedaje.</li>                               <li>Integración de redes Sociales.</li>                               <li>Responsive Design.</li>                               <li>Mantenimiento y Administración.</li>                               <li>Publicación y Registro de la Web.</li>                               <li>Correo Corporativo.</li>                               <li>Autoadministrable.</li>                               <li>Publicación en Español.</li>                               <li><a href="#" class="btn pricing_btn"  data-toggle="modal" data-target="#model-web">Solicitar</a></li>                              </ul>                           </div>                         </div>                      </div>  <!-- // WEB-DEV -->

Inserir elementos na coluna da esquerda, em Bootstrap, sem afectar a altura das linhas da coluna da direita?

Como é que ao inserir elementos na coluna da esquerda isso não afecta a altura das linhas da coluna da direita; ou seja, como faço duas colunas totalmente independentes para que ao inserir elementos numa coluna isso não afecte em nada a outra?

Já procurei mas não há nenhuma informação sobre isso em concreto.