Hello everyone. This is my first post and here i will talk a little bit about CSS height Property. Today I met something new and interesting for me. When i tried to set property height to DIV block, it worked on all blocks, except one.

How it looked like: .block { min-height:100%; } because I need, that every block has a size on full window. But for mobile version I need height:auto;. That's why I add also media query like this:

@media only screen and (max-width: 991px) { .block { height:auto; } } When the width is less than 991px, Bootstrap start to modify view for tablets and mobile phones.

The Problem was so, that even if I set "!important" to property height, it anyway shows me old small size. I don't know how, but I found only one way to solve it. I added one more selector "id", and after that everything work.

Now it looks like :

.block { min-height:100%; }

block {

  min-height:100%;

}

@media only screen and (max-width: 991px) { .block { height:auto; } #block { height:auto; } }

Maybe it will be helpful for someone.

P.S. Can me someone explain, what was that?

Sorry for grammatical mistakes.


206 0 0