CSS height 100% percent not working

Question

I have a div with height: 100%; but it's not working. When I declare a fixed height (for example height: 600px;) it is working, but I would like a responsive design.

html:

<blink><div class="row-fluid split-pane fixed-left" style="position: relative; height: 78%;">
    <div class="split-pane-component" style="position: relative; width: 50em;">
        <div style="">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#html" data-toggle="tab">Html</a></li>
                <li><a href="#helpers" data-toggle="tab">Helpers</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="html" style="height: 100%;">
                    <textarea id="htmlArea" style="height: 100%;">{{:html}}</textarea>
                </div>
                <div class="tab-pane" id="helpers" style="height: 100%;">
                    <textarea id="helpersArea">{{:helpers}}</textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="split-pane-divider" id="my-divider" style="left: 50em; width: 5px;"></div>
    <div class="split-pane-component" style="left: 50em; margin-left: 5px;">
        <div style="">
            <ul class="nav nav-tabs">
                <li>
                    <a href="#" class="active">Preview
                    <img width="22px" height="16px" class="preview-loader" src="img/spinner-green2.gif" style="display: none" />
                    </a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" style="height: 100%;">
                    <iframe name="previewFrame" frameborder="0" allowtransparency="true" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
</blink>

iframes don't have automatic heights. you have to get it with javascript and define it. if you want it responsive you can use a window resize function — Jonathon, Jan 25 '14 at 22:55
[Origin of the blink tag](http://www.montulli.org/theoriginofthe%3Cblink%3Etag) — joshuakcockrell, Jul 06 '18 at 18:39

score 52 · Answer 1 · answered Jan 25 '14 at 22:53

52

You probably need to declare the code below for height:100% to work for your divs

html, body {margin:0;padding:0;height:100%;}

fiddle: http://jsfiddle.net/5KYC3/

answered Jan 25 '14 at 22:53

Night

731
5
14

This worked for me. – Cody MacLeod Feb 21 '20 at 03:11

score 24 · Answer 2 · edited Jan 08 '15 at 20:57

24

You aren't specifying the "height" of your html. When you're assigning a percentage in an element (i.e. divs) the css compiler needs to know the size of the parent element. If you don't assign that, you should see divs without height.

The most common solution is to set the following property in css:

html{
    height: 100%;
    margin: 0;
    padding: 0;
}

You are saying to the html tag (html is the parent of all the html elements) "Take all the height in the HTML document"

I hope I helped you. Cheers

edited Jan 08 '15 at 20:57

416E64726577

2,214
2
23
47

answered Sep 24 '14 at 01:22

Carlos Garnica Jr.

423
3
10

How do I assign an element's height relative to the height of the page? – Aaron Franke Feb 02 '19 at 22:41

score 10 · Answer 3 · edited May 31 '18 at 10:19

10

I would say you have two options:

to get all parent divs styled with 100% height (including body and html)
to use absolute positioning for one of the parent divs (for example #content) and then all child divs set to height 100%

edited May 31 '18 at 10:19

Aliaksandr Sushkevich

11,550
7
37
44

answered Jan 25 '14 at 23:01

Nikola Nikolić

356
2
17

1

Position fixed works too. – cby016 Nov 11 '20 at 17:55

score 7 · Answer 4 · answered Sep 19 '14 at 22:35

7

Set the containing element/div to a height. Otherwise your asking the browser to set the height to 100% of an unknown value and it can't.

More info here: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

answered Sep 19 '14 at 22:35

Bryan Myers

559
5
6

9

it's not unknown, browser has computed value of each element. It's NOT unknown – Muhammad Umer Jun 27 '15 at 05:14

score 0 · Answer 5 · answered Jan 25 '14 at 22:55

0

I believe you need to make sure that all the container div tags above the 100% height div also has 100% height set on them including the body tag and html.

answered Jan 25 '14 at 22:55

Lee Mandeville

96
6

score 0 · Answer 6 · answered Jan 25 '14 at 22:57

For code mirror divs refer to the manual, these sections might be useful to you:

http://codemirror.net/demo/fullscreen.html

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
  theme: "night",
  extraKeys: {
    "F11": function(cm) {
      cm.setOption("fullScreen", !cm.getOption("fullScreen"));
    },
    "Esc": function(cm) {
      if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
    }
  }
});

And also take a look at:

http://codemirror.net/demo/resize.html

Also a comment:

Inline styling is horrible you should avoid this at all costs, not only will it confuse you, it's poor practice.

score 0 · Answer 7 · answered Dec 03 '14 at 22:38

0

Night's answer is correct

 html, body {margin:0;padding:0;height:100%;}

Also check that your div or element is NOT inside another one (with height less than 100%) Hope this helps someone else.

answered Dec 03 '14 at 22:38

j.rmz87

786
1
7
18

1

Answer is correct. html, body must be height 100%. The div you want has to be 100% + all the parents between body and the div you want to set. – Stephan Schielke Feb 26 '16 at 12:12

CSS height 100% percent not working

7 Answers7

Linked

Related