0

I have a full height page, let say the height is 900px. The page has a right sidebar, in the sidebar I have 2 blocks with text + image. I would like to change the height of the blocks dynamically, to prevent the scrolling on the page. What is the best practice for this?

  1. Should I calculate the sizes using Javascript?
  2. Maybe with media queries I can achieve this, but it won't be perfect.

Currently I'm using media queries:

.blocks {
    height: 200px;
}

.blocks p {
    font-size: 12px;
}

.blocks img {
    height: 150px;
}

@media screen and (min-height: 700px) {
    .blocks {
        height: 300px;
    }

    .blocks p {
        font-size: 14px;
    }

    .blocks img {
        height: 250px;
    }
}

Unfortunately with media queries it's not the best, but I don't want to use javascript to calculate sizes, I hope there's better solution with only css. Is flexbox good for this?

user1452062
  • 805
  • 4
  • 12
  • 27
  • 2
    This question is either too broad,**opinion based** or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. – Paulie_D Nov 23 '16 at 16:47
  • You might want to [edit] the question to remove all of the opinion based issues. Just asking how to make elements the same height (some code would be useful) is enough. A **search** for similar issues would be optimal too....this has been covered before...many times. – Paulie_D Nov 23 '16 at 16:48
  • add some code please – user2684452 Nov 23 '16 at 16:49
  • What about the html and a snippet here or on jsfiddle/codepen to show what you done so far and where you get stuck ? flex ? is this an answer you could have been inspired from ? http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486 – G-Cyrillus Nov 23 '16 at 17:32
  • use percentage. – Tonza Nov 23 '16 at 19:45

0 Answers0