Height 100% not working on any device

Question

So, I've encountered a bug on a website I'm making, where my sidebar background will not cover the whole height on any device. I've tried giving the elements before it 100% height, and have looked through many similar posts but none of their solutions fixing my issue. The site is at https://minepos.piggypiglet.me, and I can supply the code in a hastebin if requested, but dev tools should suffice?

html: https://hastebin.com/ovitaroxen.xml css: https://hastebin.com/cocuketino.css Sorry for the links, there was too much to include in code blocks.

I don't have an accounI to access "minepos", can you post your code please. — ziMtyth, Aug 29 '17 at 15:04
_" I can supply the code in a hastebin if requested"_ No, you need to post a [mcve] in your question, not a third party site. See [ask] — j08691, Aug 29 '17 at 15:05
Don't use `height:100%` unless all parent elements are `100%`, which in your case are not. Use `height:100vh` — Koby Douek, Aug 29 '17 at 15:06
This is just a frontend, simply click login. I'm adding examples now. Will first try vh though. — PiggyPiglet, Aug 29 '17 at 15:06
Just added code links, there were too many characters to include the code in the post. The vh thing didn't work. — PiggyPiglet, Aug 29 '17 at 15:17

sameera lakshitha · Answer 1 · 2017-08-29T15:18:12.800

0

you can use vh for doing your task.

div {
   height: 100vh /*100% of device height*/
}

This is you can use for responsive designs.

edited Aug 29 '17 at 15:18

answered Aug 29 '17 at 15:07

sameera lakshitha

1,925
4
21
29

1

@KobyDouek if it IS an answer, it's acceptable. – zfrisch Aug 29 '17 at 15:12
2

Some questions are better left unanswered until the "question is [well-asked](https://stackoverflow.com/help/how-to-answer)" – Carol Skelly Aug 29 '17 at 15:25
@ZimSystem ok. I am new to StackOverflow. thanks for advice me. – sameera lakshitha Aug 29 '17 at 15:27

Height 100% not working on any device

1 Answers1