0

I looked for already asked questions like here and here but couldn't get working.

I would like to make something similar to image down below but an struggling to make sect-a and section-b size of full window. It either is only full sized or extends below the window area. I want to make like this

Image extending below

I am using mini css for grids and below is my code

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">

    <link rel="stylesheet" href="style.css">
    </head>

<body>

    <nav class="navigation">
        <h1>Navbar</h1>
    </nav>
    
    <section class="section ">
        <div class="container">
            <div class="row" style="min-height:100vh; min-height: -webkit-fill-available;box-sizing: border-box;">
                <div class="col-sm-12 col-md-8 col-lg-8" style="background-color: aqua;">
                    <input class="button" type="submit" value="sect a"
                        style="border-radius:2rem; padding: 0.5rem 3rem 0.5rem 3rem;">
                </div>

                <div class="col-sm-12 col-md-4 col-lg-4" style="background-color: yellow;">
                    <button>sect b</button>
                </div>
            </div>
        </div>
    </section>

</body>

</html>

How can I make sec-a and sec-b available remaining full screen and not overflow it.

Android_dev
  • 83
  • 7

2 Answers2

0

If i understand correctly, you want to make section a and section b as high as your window, no more, no less. There are 2 ways to do this:

  1. you can set the html and body to be 100vh, or 100 units ot "View height", which is the height of your inner browser window. You can set the display of the body to flex and flex direction to column, that way, when you set the height of the sections to "100%', or their flex grow to "1". they will grow to be the full size of the remaining space under the navbar
  2. if you wish to add something below these sections, such as more sections,t he above method won't work. Then you can either:
    • calculate the nav's height and set the height of sect a and sect be to be (100 vh - the nav height)
    • put the nav and the sections in a single flex container, that has height of 100vh, and then add more content below it.
Vasil Kostadinov
  • 220
  • 3
  • 12
-1

I had a similar issue and fixed it by adding those lines in my css:

*{
  margin: 0;
  padding: 0;
}

After adding this, I was able to use the the whole space.

JulianX
  • 57
  • 2