How to resize container height based on browser width

user_17330735 0
Viewed 582

How can I scale the black containers height from max-height of 550px to for example height of 400px by just changing browsers width. And together with the black container the box divs also should get smaller proportionally. I want it without the use of media queries.. I want it to change dynamically so you can see it resizing pixel by pixel. I don't want it to just jump from one height to another by reaching a media queries width.

.container-black {
    height: 550px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 8px grey;
}

.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    width: 30%;
    background-color: red;
}
<body>

    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
    </div>
</body>

responsive-design css html
3 Answers

Use dynamic values such as vw or viewport width. For example, to keep your black borders you can set box1 to width: 40vw;. This means box1 will use 40% of the viewport size when resizing, and the container-black will maintain 10% of viewport width on any device. Allowing it to be responsive.

The Dynamic Viewport is the viewport sized with dynamic consideration of any UA interfaces. It will automatically adjust itself in response to UA interface elements being shown or not

EDIT -- added 2 more container-blacks and nested them in parent container and defined their height based of % so that they resize responsively.

.container-black {
    height: 33%;
    width: 100vw;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 8px grey;
}

.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    width: 40vw;
    background-color: red;
}

.container {
  height: 100vw;
}
<body>
<div class="container">
    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        
    </div>
    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        
    </div>
    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        
    </div>
</div>
</body>

user_164963570

You can use the vw unit (= percent of viewport width) in your height definition, if necessary, inside a media query

user_56416690
user_76837450
Related