1

He podido establecerlo pero con una tabla de por medio y siento que no es la mejor manera ya que luego editaré los estilos con javascript para que se oculte un iframe y el otro ocupe todo el espacio. este es el código:

<div class="main-container">
      <table style="width: 100% !important;height: 100%;">
        <tr>
          <td>
              <iframe id="container-form" src="https://picsum.photos/800" style="width: 100% !important;height: 100%;"></iframe>
          </td>
          <td>
              <iframe id="container-imagen" src="https://picsum.photos/800" style="width: 100% !important;height: 100%;"></iframe>
          </td>
        </tr>
      </table>
    </div>

De preferencia cambiar las etiquetas o agregar algún estilo.

2 respuestas 2

1

El contenedor tiene el 100%, y los div internos el 50%.

.main-container {
  width: 100%;
}

.div-mitad {
  width: 50%;
  float: left; 
}
<div class="main-container">
  <div class="div-mitad"> 
    <iframe id="container-form" src="https://picsum.photos/800" style="width: 100% !important;height: 100%;"></iframe>
  </div>
  <div class="div-mitad"> 
    <iframe id="container-imagen" src="https://picsum.photos/800" style="width: 100% !important;height: 100%;"></iframe>
  </div>
</div>

1
0

Puedes utilizar la variante del Grid CSS, el código queda bastante limpio.

En código cuando ocultes una columna puedes establecer además grid-template-columns: 100% 0%; o grid-template-columns: 0% 100%; de manera dinámica.

Para ocupar todo el algo de la página puedes usar height: 100vh; como se describe en la respuesta a la otra pregunta "force css grid container to fill full screen of device"

.main-container {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100vh;
}
<div class="main-container">
      <iframe id="container-form" src="https://picsum.photos/800"></iframe>
      <iframe id="container-imagen" src="https://picsum.photos/800"></iframe>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.