Variable height, scrollable div, contents floating

Question

I'm trying to build this web app thing (it'll eventually a stage/props/que management system for my community theatre group) and I've encountered quite a difficult problem. Apologies if this question has been answered before, I certainly couldn't find anything relating to this specific problem.

Here's the last two I've tried. In theory they have the best chance of working but... they aren't working.
questions/2758651/how-to-change-height-div-on-window-resize
questions/16837525/resize-div-height-with-jquery

So what I'm doing is creating a page that resizes to fit the current screen real-estate the problem I'm having is the central scrolling div and the 'sidebar's' scrolling div only scroll when they have a fixed height. Basically if I use a percentage height in my CSS it becomes the size of it's contents regardless of how overflow: scroll; is setup. I'm thinking it's got something to do with the float:left; definition on all col-*-* elements. The thing I can't fathom is that when I set the div a fixed height (say height:300px;) everything works. Hence why I'm trying JS/JQ solutions but apparently even $(window).height() is getting the document height in Chrome and not the 'viewport' height.

Here's the page as it stands with a fixed height. http://azarel-howard.me/stage-management/props-manager/ I've tried a handful of JS solutions but... they don't seem to run. Or they run into the same issues.

edit: code as requested;

<body>
  <!-- Scroll block - this works with fixed height. However I NEED variable height and also WP8 IE support which just flat out doesn't work as I've discovered. (scrolling-wise that is) -->
  <div class="scrollable col-lg-9" style="height: 650px; overflow-y: auto;">
    <div class="container">
      <!-- This scene block get's repeated for each scene -->
      <div class="scene row">
        <h4>Scene 1</h4>
        <div class="container">
          <!-- This script block get's repeated for each speakers block within the scene -->
          <div class="script row col-lg-offset-1">
            <div class="col-lg-2">
              <h6>Speaker-1:</h6>
            </div>
            <div class="col-lg-10">
              <p>Speaker's text</p>
            </div>
          </div>
          <!-- End script block -->
        </div>
      </div>
      <!-- End scene block -->
    </div>
  </div>

  <div class="col-lg-3" style="height: 650px;">
    <div class="container">
      <!-- Scroll block - again this works with fixed height. -->
      <div class="row" style="height: 430px; overflow-y: auto; overflow-x: hidden;">
        <h5>Stage Props</h5>
        <div class="row">
          <div class="container">
            <div class="col-lg-12">
              <h6>Scene 1</h6>
            </div>
          </div>
        </div>
      </div>
      <!-- Everything from here down is irrelevant for the purpose of figuring out how to have a variable height scrolling div but the presence of these elements will effect to height variables for this specific scrolling div. -->
      <div class="row">
        <div id="myCarousel" class="carousel slide">  
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <div class="container">
                <div class="contributor">
                  <img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_004.jpg" alt>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="container">
                <div class="contributor">
                  <img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_005.jpg" alt>
                </div>
              </div>
            </div>
          </div>
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>
      <div class="row">
        <button type="button" class="btn btn-default" style="width:49%;">Current Que</button>
        <button type="button" class="btn btn-default" style="width:49%;">Next Que</button>
      </div>
    </div>
  </div>
</body>

And the CSS for reference: these excerpts are extracted directly from bootstrap.css

.col-lg-9,
.col-lg-3 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-lg-9 {
  width: 75%;
}
.col-lg-3 {
  width: 25%;
}
@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.row:before,
.row:after {
  display: table;
  content: " ";
}
.row:after {
  clear: both;
}
.row:before,
.row:after {
  display: table;
  content: " ";
}
.row:after {
  clear: both;
}

Ok... I just found this which apparently should work I'm trying it now.
HTML5 Canvas 100% Width Height of Viewport?

Can you give a code example of what you've been trying, or a jsfiddle? — monners, Nov 28 '13 at 01:10
I've not been doing web dev for long so no it's not on jsfiddle. Um I'll edit my original question with some code. — azariah, Nov 30 '13 at 10:02
Moderator please ignore my previous request for deletion of this question. Apparently I was in error. — azariah, Dec 03 '13 at 10:21
At long last I'm going to answer my own question with the info that is the lynch pin to this issue. — azariah, Dec 05 '13 at 07:19

score 2 · Accepted Answer · answered Dec 05 '13 at 07:56

Ok at long last I've discovered the secret to using height percentages! I'm going to answer my own question (even though I think it's somewhat bad form but anyway).

With percentages of width everything works as expected. If a relative width is defined it is based off of the parent elements width, which unless explicitly assigned, is the size forced on it by the other content inside of it (say a picture that's 200px wide).

Now it doesn't work this way with height. I decided to go back to basics with this one and concentrated on background-color div's to isolate the factor. After a bit I decided a simple google search was in order, and very quickly discovered this forum question from '08 http://forums.htmlhelp.com/index.php?showtopic=7543 and there you go.

In order to use percentage height the height of the parent element MUST be EXPLICITLY defined from the opening HTML tag all the way down to the element where it counts. With the exception of parent elements that have explicit px heights defined.

So for those of us wanting to make 'fullscreen' apps (ie those that are contained within the dimensions of the browser viewport) we need to include the following CSS code.

html, body {
    height: 100%;
}

or in my case the div row elements directly under the body also need this applied so

html, body, body > div.row {
    height: 100%;
}

and that will make all the difference.

Just remember that from this level down you will still need to include in-line style statements for each and every element that needs to be percentage scaled.

score 1 · Answer 2 · answered Nov 28 '13 at 01:33

1

Assuming your HTML is something along the lines of:

<div class="sidebar">
   <!-- sidebar content -->
</div>
<div class="main-content">
    <!-- main content -->
</div>

You can achieve an independently scrolling sidebar with the following style declarations:

.main-content {
    position: relative;
    width: 75%;
}
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 25%;
    overflow-y: scroll;
}

Here's a jsfiddle example http://jsfiddle.net/7txqj/

answered Nov 28 '13 at 01:33

monners

4,784
2
22
44

um it's not please look at the page I linked to http://azarel-howard.me/stage-management/props-manager/ use ctrl+u or right-click+inspect element to view code. – azariah Nov 30 '13 at 10:01
BTW the floating sidebar idea had occurred to me but.... It itself needs to have a variable height scrolling div that fits to the page size. And aesthetically as a 'web app' :P it makes more sense to have the content scroll within the page element or at least for the scrollbar to be 'in front of' / left of any sidebar-esque element. – azariah Nov 30 '13 at 11:29

Variable height, scrollable div, contents floating

2 Answers2

Linked