HTML Como fazer main aumentar conforme o conteudo

Tosseg0 · 6 de novembro de 2023

Tenho um trabalho da facul pra fazer e ja tinha feito porém vou ter que refazer de outro jeito mas estou com problema no processo. Peguei um layout do meu colega e vou ter que fazer com esse layout e ao adicionar as coisas que ja tinha no meu nesse layout está acontecendo algo que é ao adicionar algo no main ou até mesmo crescer os conteúdo, ele começa a passar o main e o main não acompanha o crescimento do conteudo como eu peguei o layout dele, e ele fez de um jeito totalmente diferente tentei aqui ve e não conseguir saber o porque desse erro. não sei é besteira e tal mas como sou ruim em frontend é complicado kkk e também tive que fazer de outro jeito isso prejudicou muito.OBS: Preciso fazer nesse mesmo layout do main, por conta de uma parte do back.
Print do que esta acontecendo:(Cresci as caixa pra mostrar o que é, se eu adicionar algo ou outra div tambem dar no mesmo.)

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width>, initial-scale=1.0">
    <link rel="stylesheet" href="static/layout.css">
    <script src="https://kit.fontawesome.com/808cb3fb50.js" crossorigin="anonymous"></script>

    <title>Dashboard</title>
</head>

<body>
    <header>    
        <img src="static/LOGO.jpg">
        <a href="/">SAIR</a>
        <div class="info-header">
            <div class="logo">
              <h1>Gestao de Banco</h1>
            </div>
      
          </div>
          
          <div class="icone-guia-pesquisar">
      
            <h3 class="h3-icone-user">048.054.995.83</h3> <i class="fa-solid fa-user"></i> <a href="bars"  ><i class="fa-solid fa-bars"></i></a>
      
          </div>
    </header>
    
    <nav>
         <a href="/home"> <i class="fa-solid fa-house"></i>HOME</a>
        <hr>
        <br>
        <a href="/churn"> <i class="fa-solid fa-person"></i>PREVISÃO DE CHURN</a> 
        <hr>
        <br>
        <a href="/relatorio"> <i class="fa-solid fa-table-columns"></i>Dashboard</a>
        <hr>
    </nav>
    <main>
        
        <div class=" titulo-dash">
            <h2> <i class="fa-solid fa-table-columns"> </i> Dashboard </h2>
            <br>
            <hr class="separador">
            <br>
            <p><i class="fa-solid fa-house"></i> / Dashboard Danki</p>
        </div>
        <br>
        <div class="conteudo-dashboard" >
            <div class="box-info">
                <div class="box-info-vendas">
                    <div class="info-text">
                        <h3 class="alinhar-vendas">Total de Vendas</h3>
                        <p class="alinha-vendas">R$5.000</p>
                    </div>
                </div>
                <div class="box-info-pedidos">
                    <div class="info-text">
                        <h3>Total de Pedidos</h3>
                        <p>R$3.000</p>
                    </div>
                </div>
                <div class="box-info-precos">
                    <div class="info-text">
                        <h3>Média de Precos</h3>
                        <p>R$4.000</p>
                    </div>
                </div>
            </div>
            <div class="graficos">
                <div class="grafico-vendas">
                    <img class="img-grafico" src="data:image/png;base64,{{grafico_vendas}}"
                        alt="Gráfico de Vendas Mensais">
                </div>
                <div class="grafico-media">
                    <img class="img-grafico-media" src="data:image/png;base64,{{grafico_media}}" alt="Gráfico de Média">
                </div>
            </div>

            <div class="feed">
                <div class="titulo-feed">
                    <h3>Feed</h3>
                </div>
                <div class="feed-unico">
                    <div class="feed-text">
                        <div class="icone-circle" style="background-color: red;"><i class="fa-solid fa-bell"></i></div>
                        <span>voce tem 3 pedidos em andamento</span>
                    </div>
                    <div class="feed-time">
                        <h3>30 minutos atrás</h3>
                    </div>
                </div>
                <div class="feed-unico">
                    <div class="feed-text">
                        <div class="icone-circle" style="background-color: aqua;"><i
                                class="fa-solid fa-credit-card"></i></div>
                        <span>voce nova solicitacao de cartao de crédito</span>
                    </div>
                    <div class="feed-time">
                        <h3>Agora</h3>
                    </div>
                </div>
                <div class="feed-unico">
                    <div class="feed-text">
                        <div style="background-color: RGB(47, 255, 141);" class="icone-circle"><i
                                class="fa-solid fa-cart-shopping"></i></div>
                        <span>voce tem um novo pedido</span>
                    </div>
                    <div class="feed-time">
                        <h3>2 horas atras</h3>
                    </div>
                </div>
                <div class="feed-unico">
                    <div class="feed-text">
                        <div style="background-color: RGB(47, 255, 141);" class="icone-circle"><i
                                class="fa-solid fa-cart-shopping"></i></div>
                        <span>Novo pedido feito</span>
                    </div>
                    <div class="feed-time">
                        <h3>30 minutos atrás</h3>
                    </div>
                </div>
                <div class="feed-unico">
                    <div class="feed-text">
                        <div class="icone-circle" style="background-color: indianred;"><i
                                class="fa-regular fa-file"></i></div>
                        <span>voce tem 3 tarefas pendente</span>
                    </div>
                    <div class="feed-time">
                        <h3>1 hora atras</h3>
                    </div>
                </div>
            </div>
        </div> <!--Conteudo do Dashboard--> <!--Container do Dashboard-->
    </main>
   
</body>

</html>

Codigo agora em CSS

@charset "UTF-8";

/* Propriedades que se aplicam a todos os elementos da página. */
* {
	/* Remove a margem externa de todos os lados do elemento. */
	margin: 0;

	/* Remove o espaçamento interno de todos os lados do elemento. */
	padding: 0;

	/* Inclui o preenchimento e a borda na largura e altura. */
	box-sizing: border-box;
}

body {
	/* Exibição flexível.                          */
	/* Torna o elemento um flex container          */
	/* e os seus elementos internos em flex-itens. */
	display: flex;

	/* Quebra de linha quando os itens não couberem na largura da tela. */
	flex-wrap: wrap;

	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	flex: 1 1 100vw;

	/* Margem de todos os lados. */
	margin: 3px;
}

/* Formatação comum entre os elementos. */
header, nav, main, aside, footer {
	/* Cor do fundo. */
	background: #dff8e3;

	/* Exibição flexível.                          */
	/* Torna o elemento um flex container          */
	/* e os seus elementos internos em flex-itens. */
	display: flex;

	/* Margem externa de todos os lados. */
	margin: 3px;
}


/* Seletores para formatação individual. */

header {
	/* Altura do elemento. */
	height: 100px;
	background-color: #5C805B;
    justify-content: space-between;
	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	flex: 1 1 100vw;
}
header i {
    font-size: 40px;
    padding: 10px;
    transition: transform 0.2s;
    color: white;
}
header i:hover {
    transform: scale(1.1);
}

.info-header {
    color: RGB(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 25px;
    color: white;
}
.h3-icone-user{
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.836);
    display: inline-block;
    margin-right: 8px;
    color: RGB(0, 0, 0);
}
.icone-guia-pesquisar {
    display: flex;
}
.icone-header {
 display: flex;
 justify-content: flex-start;

}

main {
	/* Realizar a subtração de 100% da altura vertical menos a soma    */
	/* da altura dos elementos ( 400px ) com as suas margens ( 36px ). */
	height: 100vh;
	background: linear-gradient(135deg, #5C805B, #dff8e3);
	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	flex: 20 1 500px;
	flex-direction: column;
	align-items: stretch;
	position: relative;

	
}



	/* Alinha os itens na vertical. */
nav {
		flex: 1 1 200px;
		flex-direction: column;
		padding: 20px;    
}

.conteudo-dashboard {
    background-color: white;
    margin-left: 2px;
    margin-right: 2px;
    height: 100%;
}
.titulo-dash {
	background-color: white;
    padding: 20px;
    margin: 2px 2px;
    display: block;
}
i.fa-table-columns {
    width: 20px;
    height: 20px;
}
.titulo-dash h2 {
    font-size: 19px;
}
.box-info {
    width:100%;
    margin-top: 20px;
    height: 27%;
    display: flex;
    justify-content: space-between;


   
}

.box-info-vendas {
    width: 20%;
    background:linear-gradient(45deg, #FF5370, #ff869a);
    border-style: groove;
    display: flex;
    justify-content: space-between;
    color: white;
    border-radius: 40px;
    margin-top: 10px;
    margin-left: 10px;
    transition: transform 0.2s;

    
}

.box-info-pedidos{
    width: 20%;
    background:linear-gradient(45deg, #41af26, #0ec569);
    border-style: groove;
    display: flex;
    justify-content: space-between;
    color: white;
    border-radius: 40px;
    margin-top: 10px;
    transition: transform 0.2s;

}
.box-info-precos {
    width: 20%;
    background:linear-gradient(45deg, #3981df, #106af1);
    display: flex;
    justify-content: space-between;
    color: white;
    border-style: groove;
    border-radius: 40px;
    margin-top: 10px;
    margin-right: 10px;
    transition: transform 0.2s;

}
.box-info-precos:hover, .box-info-vendas:hover, .box-info-pedidos:hover {
    transform: scale(1.1);
}
.info-text {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-style: inherit;
    font-size: 20px;
    margin-left: 30px;

}
.graficos{
    display: flex;
    justify-content: space-between;
}
.grafico-vendas {
    margin-top: 20px;
    margin-left: 10px;
    border-color: #f0dde0;
    display: flex;
    justify-content: space-between;
    width: 40%;
    border-style: outset;
}
.img-grafico {
   width: 100%;
}

.grafico-media {
    width: 40%;
    display: flex;
    justify-content: space-between;
    border-style: outset;
    margin-top: 20px;
    margin-right: 10px;
    
    

}
.img-grafico-media {
    width: 100%;
}
.titulo-feed {
  margin-top: -5px;
}
.feed {
    margin-top: 5px;
    margin-left: 5px;
    background-color: RGB(215, 221, 213);
    width: 40%;
    height: 40%;
    padding: 10px;
    border-radius: 10px;
    border-style: outset;
    transition: transform 0.2s;

}
.feed:hover {
    transform: scale(1.03);

}
.feed-unico {
    display: flex;
    justify-content: space-between;   
     transition: transform 0.2s;
     height: 18%;

    
}
.feed-unico:hover{
    transform: scale(1.05);

}
.feed-text {
    display: flex;
}
.feed-text span {
    color: black;
    margin: 8px;
   
}
.feed-text .icone-circle {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.feed-text i {
    font-size: 18px;
}
.feed-time {
    color: #444;
    font-size: 15px;
}
nav a {
    
        padding: 8px 13px;
        display: block;
		color: #203B22;
		text-decoration: none;
		width: 100%;
        transition: transform 0.2s  ;
}
nav a:hover {
    background-color: #95ec7f;
    border-left: 6px solid green;
    color: black;
    transform: scale(1.1);
}

nav i {
    margin-right: 5px;
}











a {
	/* Remove a decoração padrão do elemento. */
	text-decoration: none;

	/* Definir a cor da fonte para o padrão do elemento pai. */
	color: inherit;
}

DiF · 6 de novembro de 2023

@Tosseg0 Posso estar errado... mas No CSS do elemento "Main" foi definido um tamanho da altura.

main {
	/* Realizar a subtração de 100% da altura vertical menos a soma    */
	/* da altura dos elementos ( 400px ) com as suas margens ( 36px ). */
	height: 100vh;

O VH é uma medida usada geralmente para elementos responsivos, baseado no viewport e não no elemento-pai.

Tente remover o height: 100vh; do main.

Tosseg0 · 6 de novembro de 2023

@DiF Cara era isso mesmo mano vllw!! Eu achava que 100vh era a mesma coisa que 100% só que vh seria só outra forma de escrever

DiF · 7 de novembro de 2023

@Tosseg0 Como mencionei antes, o vh e o vw são medidas para criar elementos responsivos...

por exemplo:

<img src="imagem.jpg" />

img{
  width: 350px;
}

A imagem ficará com 350px como largura, ao redimensionar o tamanho da tela, a imagem continuará a ter 350px de largura.

Mas agora se definir:

img{
  width: 350vw;
}

Ao redimensionar a tela para menor, a imagem acompanhará o redimensionamento da tela, reduzindo a largura da imagem.

Veja o exemplo em prática:

https://jsfiddle.net/dife/81s3t40u/1/

Experimenta redimensionar a tela, arrastando para o lado, a divisória central. Verá que a primeira imagem ficará na mesma proporção, enquanto a segunda, acompanhará o tamanho da tela.

extremedll · 14 de novembro de 2023

@DiF o @Tosseg0 pode usar o vh em elemento pai. mas nesse caso ele quer que o conteúdo main em si vai aumentar de acordo com a quantidade de conteúdo, ele pode usar

main {
  min-height: 100vh;
}

com isso, seu main começa já ocupando 100% da tela vertifical do dispositivo e se caso for necessário, ele vai aumentando

explicanando rapidamente:

elementoPaiX {
  min-height: 100vh;
}
/*a altura mínima desse elemento terá de altura será 100vh do dispositivo*/

elementoPaiX {
  height: 100vh;
}
/*o elemento terá inicialmente 100vh de altura do dispositivo e é isso, nada além disso. caso o conteúdo não caixa dentro desse 100vh, ou o contéudo vai extrapolhar/sobrepor outros conteúdos ou gerar uma subtela/scroll dentro da página*/

elementoPaiX {
  max-height: 100vh;
}
/*a altura miníma desse elemento começa em 0 (ou a altura do maior elemento filho), porém o máximo que o elemento Pai vai ter será de 100vh. caso não caiba e seja o necessário mais espaço vertical para caber o conteúdo filho, irá gerar uma subtela/scroll dentro da página*/

além do exemplo do @DiF , aqui você poderá ler e ver outros exemplos de vh e vw https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/

Adriano_web · 19 de novembro de 2023

@Tosseg0 oi tudo bem? Pude notar um erro na linha 6 onde você provavelmente acidentalmente inseriu um sina de "maior quê" no valor do atributo "content", isso corrigiria a maioria dos problemas relacionados a responsividade:

Linha 6:

<meta name="viewport" content="width=device-width>, initial-scale=1.0">

Entrar

HTML Como fazer main aumentar conforme o conteudo

Posts recomendados

Tosseg0

Link para o comentário

Compartilhar em outros sites

DiF

Link para o comentário

Compartilhar em outros sites

Tosseg0

Link para o comentário

Compartilhar em outros sites

DiF

Link para o comentário

Compartilhar em outros sites

extremedll

Link para o comentário

Compartilhar em outros sites

Adriano_web

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos