Making Combined Height Equal To The Height Of The Browser Window

http://featuredfotografer.com/ The .Codemirror div in combination with the #header div takes up more height than the height of the browser. How can I make them have a combined heig

Solution 1:

making combined height equal to the height of the browser window

Just add this snippet of code. It will set your content to 100% of browser window.

body,html {
   height: 100%;
}

Also you can check this.

Solution 2:

I would take a different approach to this. You can make a small 1px high and 30px wide image that looks like the background behind the line numbers and apply it to the body with a repeat-y and aligned left. Remove the height:100% on the .CodeMirror div

Alternately you can

add <div class="CodeMirror-gutter bodyGutter"></div> just before your closing </body> tag and add this to your CSS, and also again remove the height:100% on the .CodeMirror div:

.bodyGutter {
  height: 100%;
  z-index: -1;
  width: 20px;
  left: -8px;
}

This is also adding a fake gutter to your body and pushing it to the background to give the fake appearance of 100% height.