locked
VerticalAlignment=Stretch

    Question

  • does something that has the same effect as verticalalignment=stretch in xaml also exist for html apps?

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Wednesday, February 20, 2013 3:04 PM

Answers

  • In CSS:

    .myClass {
        height: 100%;
    }

    You may need to set the parent element to a specific height (or make it a part of a constrained grid) to keep your 100% height child element from overflowing its parents. You can also use calc to combine relative measurements with static adjustments, e.g.:

     
    .myClass {
        height: calc(100% - 300px);
    }

     


    Wednesday, February 20, 2013 7:31 PM

All replies

  • In CSS:

    .myClass {
        height: 100%;
    }

    You may need to set the parent element to a specific height (or make it a part of a constrained grid) to keep your 100% height child element from overflowing its parents. You can also use calc to combine relative measurements with static adjustments, e.g.:

     
    .myClass {
        height: calc(100% - 300px);
    }

     


    Wednesday, February 20, 2013 7:31 PM
  • You may also want to consider using vertical height as opposed to percentages.

    .myClass {
        height: 100vh;
    }

    Wednesday, February 20, 2013 8:45 PM