0

I am trying to apply % on my height, but I could not. Instead the div just accept px, someone know what I am doing wrong?

.left-bar{
        height:200px;

// if I use px works ok but if I use % does not work

css:

html,
body {
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  border:1px dashed gray;
}

.left-bar{
    height:200px; // why I cannot use % for my height?
    width:30%;
    border:1px solid green;
    overflow-y:scroll;
}

html:

    <div class="container-fluid">

        <div class="md-col-12">
        header
        </div>

    <div class="col-md-12">
    <div class="left-bar">
   <p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p><p>alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf </p>

    </div>

    </div>



    <div class="col-md-12">
    footer
    </div>
    </div>

jsfiddle: https://jsfiddle.net/q7kjm9pn/1/

I tried do this: Percentage Height HTML 5/CSS

is not duplicated is not duplicated see: edit: https://jsfiddle.net/q7kjm9pn/5/

Community
  • 1
  • 1
  • 1
    See [this](http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work) why it doesn't work like you want it. – KRONWALLED Jul 08 '16 at 13:52
  • 2
    need to add heights to it's parents respectively : `.container-fluid` and `.col-md-12`. see here https://jsfiddle.net/Mihai_T/20cj5yh4/ – Mihai T Jul 08 '16 at 13:56
  • Here is the working fiddle. https://jsfiddle.net/rd4zvuur/1/ –  Jul 08 '16 at 13:58
  • @MihaiT thanks, its almost what I whant, but look I defined the class left-bar for 100% and now that div is bigger than others one? how is possible because this div is should be 100% from the other. https://jsfiddle.net/20cj5yh4/2/ –  Jul 08 '16 at 14:01
  • because you have border of 1px ( so 2 px in total ) . just add `box-sizing:border-box` on `.left-bar` – Mihai T Jul 08 '16 at 14:11

0 Answers0