Automatic resizing of div according to window width

Asked

Viewed 148 times

-1

My doubt can be a bit of a beast and surely many will find me half dumb, although I already have some experiences with front and end.

The doubt and the following, I want to make a site that extends to the whole screen independent of width, I need the left side where would be mine menu have a fixed size and my div right-hand begin after this and extend to the end of the window width, using WIDTH:100% doesn’t work the way I want it to.

How can I do it in a way that I don’t use frameworks, I’m without the code at the moment.

Thank you if you can give me tips, I’m thinking about trying to use jQuery to change a class in the right div css using a calculation with the full window size when loading.

javascript jquery css css3
  • 3

    Research and study CSS flexbox.

  • Your question is shallow, there are several ways to do this, without your code you can’t tell what would be good for your case. can be flex, grid, Calc, position fixede Absolute or,float. Vc need to include what you have of code already

2 answers

1

Good afternoon, if I understand correctly you can do so:

<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 that I defined a container with maximum height and width of the viewport and that I set up the estate display: inline-flex;. I strongly recommend you start using front-end and back-end framework for your projects.

  • 1

    front-end framework is not very necessary, in fact nor recommend, makes your site lose originality, but back yes

1


You can solve this problem with flexbox

a good site to study flexbox in practice is this one you can see in practice the effect of property face

.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>

Browser other questions tagged javascript jquery css css3

You are not signed in. Login or sign up in order to post.