Jump to content

Como ajustar o layout de uma Página Web com HTML, CSS e JavaScript?

CarlosGomes1973

Por CarlosGomes1973
em HTML & CSS

 Compartilhar

Postagens Recomendadas

CarlosGomes1973

CarlosGomes1973

Postado
Postado

Boa noite a todos!

Meu nome é Carlos e sou novo aqui, este é meu primeiro post, estou estudando html, css, javascript e de tudo um pouco relacionado a desenvolvimento web.

Minha duvida é a seguinte, tenho o trecha abaixo de um pagina de estudo, onde na primeira coluna tenho um fullcalender.js e na segunda um mapa do google, e na exibição o calendário fica de uma tamnho adequado ocupando toda largura e altura, já o mapa ocupa toda a largura, mas não altura. Se puderem me ajudar fico muito grato. 

<style>
  .row{
      min-height: inherit;
  }

  .row::after, clear-fix::after{
      content: "";
      clear:both;
      display: block;
  }
  
  .col-lg-6 {width: 50%; }
  
  [class*="col-lg"] {
    float: left;
    min-height: inherit;
  }
  
  .mapa > .row > [class*="col-lg-6"]:nth-child(2n){
    height: 100% ;
  }
</style>

			<section class="mapa">
                <div class="row">
                    <div class="col-lg-6 col-md-12">
                        <div id='calendar'></div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.8789959559704!2d-46.215371423867445!3d-23.536854178816714!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce77de6021dd8b%3A0x9b5a33b084c3d814!2sR.%20Padre%20Eust%C3%A1quio%2C%20689%20-%20Vila%20Lavinia%2C%20Mogi%20das%20Cruzes%20-%20SP%2C%2008737-020!5e0!3m2!1spt-BR!2sbr!4v1710857949433!5m2!1spt-BR!2sbr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                </div>
            </section>

 

  • Curtir 1
Link to comment
Compartilhe em outros sites
Esquecido

Esquecido

Postado
Postado 
 .row {
        display: flex;
        height: 100vh; /* Alterado para ocupar a altura total da viewport */
    }

    .col-lg-6 {
        flex: 1;
        height: 100%; /* Garantindo que cada coluna ocupe 100% da altura da linha */
    }

    #calendar {
        height: 100%;
    }

    iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
  </style>
</head>
<body>
  <section class="mapa">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div id="calendar"></div>
        </div>
        <div class="col-lg-6 col-md-12">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.8789959559704!2d-46.215371423867445!3d-23.536854178816714!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce77de6021dd8b%3A0x9b5a33b084c3d814!2sR.%20Padre%20Eust%C3%A1quio%2C%20689%20-%20Vila%20Lavinia%2C%20Mogi%20das%20Cruzes%20-%20SP%2C%2008737-020!5e0!3m2!1spt-BR!2sbr!4v1710857949433!5m2!1spt-BR!2sbr" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </div>
  </section>

 

  • Curtir 1
Link to comment
Compartilhe em outros sites
  • Casa do Desenvolvedor mudou o título para Como ajustar o layout de uma Página Web com HTML, CSS e JavaScript?
CarlosGomes1973

CarlosGomes1973

Postado
  • Autor(a)
Postado

Obrigado pela resposta, porem a idéia é realmente fazer com o float, para forçãr meu conhecimento com essas tecnicas, tb estou refazendo o mesmo layout com display:table, display:flex e display:grid. Entendo que possa ser mais simples fazer com os demais ao inves do float. Então se é possivel eu gostaria de uma orientação, se não, qual seria a explicação mais tecnica para justificar? Pode ser tambem que a solução com float só possa ser mitigado com javascript, mas neste caso ainda vou iniciar o estudos de forma mais profunda. E caso eu encontre a solução tambem vou postar aqui.

  • Curtir 1
Link to comment
Compartilhe em outros sites
angelorubin

angelorubin

Postado
Postado

A não ser pelo fato de trabalhar com algum código legado, fora isso não existem motivos úteis para você utilizar o float ao invés de flex e/ou grid.
Atualmente já é utilizado em larga escala o display flex.

  • Curtir 1
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...