0

Minha duvida pode ser um pouco besta e com certeza muitos vão me achar meio burro, apesar de já ter algumas experiencias com front e end.

A duvida e a seguinte, eu quero fazer um site que se estenda a toda a tela independente da largura, preciso que do lado esquerdo onde ficaria meu menu tenha um tamanho fixo e meu div do lado direito comece apos este e estenda até o final da largura da janela, usando WIDTH:100% não funciona como eu quero.

Como posso fazer isso de maneira que não use frameworks, estou sem o código no momento.

Agradeço se puderem me dar dicas, estou pensando em tentar usar jQuery para mudar uma classe no css do div direito usando um calculo com o tamanho total da janela ao carregar.

2
  • 3
    Pesquise e estude sobre CSS flexbox.
    – Sam
    Commented 28/03/2019 às 17:20
  • Sua pergunta está rasa, existem várias formas de fazer isso, sem seu código não da para dizer o que seria bom para o seu caso. pode ser flex, grid, calc, position fixede absolute ou,float. Vc precisa incluir o que tem de código já Commented 28/03/2019 às 17:22

2 Respostas 2

2

Você pode resolver esse problema com flexbox

um bom site para estudar flexbox na prática é esse aqui você consegue ver na pratica o efeito de cara propriedade

.wrapper{
  height: 100vh;
  display:flex;
}

.menu{
  height: 100%;
  width: 200px;
  background-color:red;
}
.conteudo{
  height:100%;
  flex:1;
  /* você pode usar width:100%, mas isso vai fazer com que o .menu
  fique menor e você iria precisar colocar um min-width:200px nele*/
  background-color:blue;
}
<div class="wrapper">

  <div class="menu"></div>
  <div class="conteudo"></div>

</div>

1

Boa tarde, se bem entendi você pode fazer assim:

<html>
<head>
    <style>
        .conteiner {
            width: 100% !important;
            height: 100% !important;
            border: 1px solid red;
            display: inline-flex;
        }
        .menu-left {
            width: 120px;
            height: 100%;
            position: relative;
            border: 1px solid blue;
        }
        .page {
            width: 100%;
            height: 100%;
            position: relative;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div class="conteiner">
        <div class="menu-left">MENU</div>
        <div class="page">PÁGINA</div>
    </div>
</body>
</html>

Note que defini um contêiner com altura e largura máxima do viewport e que setei a propriedade display: inline-flex;. Recomendo fortemente você começar a usar Framework de front-end e back-end para seus projetos.

1
  • 1
    framework de front-end nao é muito necessario, na verdade nem recomendo, faz com que seu site perca a originalidade, mas de back sim
    – spacedogcs
    Commented 28/03/2019 às 18:19

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .