1

My page layout is like this Web-Page The height is split into 3 pieces: top, middle, bottom

I want the page to fit the device height and width 100%, so there are no scroll bars on height or width

Right now I'm doing

#top {
...
height: 10%;
...
}

#middle {
...
height: 80%;
...
}

#bottom {
...
height: 10%;
...
}

And this works perfectly height-wise

Now I'm trying to split the bottom part horizontally to have 3 elements shown in green on the picture - 2 circles on the sides, and a square element in the middle

And this is where I'm struggling to understand how to make it work, so I have 2 questions:

  1. Since the height of the page will be dynamic, bottom will have different height. If the height is 1000px - bottom will be 100px, the circles should have height: 100px; width: 100px; border-radius: 50%;. If the height is 500px, it should to be height: 50px; width: 50px; border-radius: 50%;. Is there a way to make it dynamic?
  2. For splitting the page into top, middle, bottom, I'm using simple height CSS property, but for the bottom row split into 3 I'm using flex, since that seems to be better. Is any way more preferred than the other? Should I just use heigth and width, or should I use flex for the entire page?
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Arno
  • 356
  • 5
  • 18

3 Answers3

1

If using grid is an option, below should do the job pretty good:

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-rows: 10% auto 10%;
  grid-template-columns: 1fr;
  height: 100vh;
  width: 100vw;
}

.header {
  background: yellow;
}

.wrapper {
  background: red;
}

.footer {
  background: blue;
  display: grid;
  grid-template-columns: calc(100vh / 10) auto calc(100vh / 10);
  
  height: 100%;
}

.footer .circle {
  border-radius: 50%;
  background: lightgray;
  height: 100%;
  width: 100%;
}

.footer .block {
  background: purple;
  height: 100%;
  width: 100%;
}
<div class="grid">
  <div class="header">

  </div>
  <div class="wrapper">

  </div>
  <div class="footer">
    <div>
      <div class="circle">&nbsp;</div>
    </div>
    <div>
      <div class="block">&nbsp;</div>
    </div>
    <div>
      <div class="circle">&nbsp;</div>
    </div>
  </div>
</div>
baao
  • 71,625
  • 17
  • 143
  • 203
  • I think if someone wants to make the height dynamic then, instead of using 100vh, max-height: 100% can be a better alternative – Ritambhar Das Jun 16 '19 at 10:08
  • I tried using `vh` and `vw`, but on mobile browsers it counts the top bar as height I think, so % works better in my example I think, what @RitambharDas said . https://stackoverflow.com/a/37113430/3316338 I'll try your solution for now – Arno Jun 16 '19 at 10:09
  • I always prefer to use % for height as well as width. But for height, you must use max-height for the body, if you are using % – Ritambhar Das Jun 16 '19 at 10:12
  • @bambam it was working perfectly on codepen with `vh` `vw`, but when I switch to % it's breaking, am I doing it wrong? :( https://codepen.io/anon/pen/OeNVJx – Arno Jun 16 '19 at 10:14
  • @Arno the code is setting the columns width in dependance to the viewport's height (`calc(100vh / 10)`). If you're using `%`, it'll be set according to the width. It should be no problem to use percent for the body if you prefer that, but the calculation should be done from `100vh` – baao Jun 16 '19 at 10:20
  • @bambam I set the body to `height: 100%; width: 100%`, in the css you provided, and it doesn't work on mobile. My suspicion is that on mobile 100vh = 100% + address bar. When I'm doing 100% on the body and 100vh on the `.grid`, the address bar height that "sticks out" will be hidden. I tried removing the `overflow: hidden` and it doesn't fit the page on mobile – Arno Jun 16 '19 at 10:35
1

the unit vh break still problems on the mobiles. You can use js to fix the problem with a few simple lines.

    .my-element {

height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); }

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit

let vh = window.innerHeight * 0.01; // Then we set the value in the --vh custom property to the root of the document document.documentElement.style.setProperty('--vh', ${vh}px);

the detail here ( tutorial) enter link description here

Upsy
  • 41
  • 3
  • This seems to be working as expected on mobile! I'll add the resize listener as mentioned in the article and give it a go – Arno Jun 16 '19 at 11:09
0

By using display flex you can use this :

*{
    padding: 0;
    margin: 0;
}

.flex-container{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.header{
    background-color: #4273f8;
    width: 100vw;
    height: 10vh;
}

.main{
    background-color: #0044ff;
    width: 100vw;
    height: 80vh
}

.footer{
    background-color: #4273f8;
    width: 100vw;
    height: 10vh;
}

.footer .footer-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.circle-left{
    width: 5%;
    height: 100%;
    background-color: #00ff62;
    border-radius: 50%;
    margin: 0 .2em;
}

.footer-center{
    width: 100%;
    height: 100%;
    background-color: #00ff62;
}

.circle-right{
    width: 5%;
    height: 100%;
    background-color: #00ff62;
    border-radius: 50%;
    margin: 0 .2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Flex with round buttons in a row</title>
</head>
<body>
    <div class="flex-container">
        <header class="header">
            
        </header>
        <main class="main">

        </main>
        <footer class="footer">
            <div class="footer-container">
                <div class="circle-left">

                </div>
                <div class="footer-center">

                </div>
                <div class="circle-right">
                    
                </div>
            </div>
        </footer>
    </div>
</body>
</html>
charoufnassro
  • 1
  • 1
  • `vh` and and `vw` doesn't work on mobile proplery. Basically on mobile it works like 100vh = 100% + address bar height, so it doesn't really work for me to fit the height of the device :( more explained here https://stackoverflow.com/a/37113430/3316338 – Arno Jun 16 '19 at 10:55
  • it work on mobile, try to see this link https://developer.mozilla.org/fr/docs/Web/CSS/length – charoufnassro Jun 16 '19 at 11:16