可变高度，可滚动div，内容浮动

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. 我正在尝试构建此Web应用程序（最终将为我的社区剧院小组使用舞台/道具/场所管理系统），并且遇到了非常困难的问题。 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 问题/ 2758651 /如何更改窗口上的高度div的大小
questions/16837525/resize-div-height-with-jquery 问题/ 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. 因此，我正在做的是创建一个可调整大小以适合当前屏幕的页面，以解决我遇到的问题，即中央滚动div和“侧边栏”的滚动div仅在它们具有固定高度时才滚动。 Basically if I use a percentage height in my CSS it becomes the size of it's contents regardless of how overflow: scroll; 基本上，如果我在CSS中使用百分比高度，则无论overflow: scroll;如何，它都将成为其内容的大小overflow: scroll; is setup. 已设置。 I'm thinking it's got something to do with the float:left; 我在想这跟float:left; definition on all col-*-* elements. 所有col-*-*元素上的定义。 The thing I can't fathom is that when I set the div a fixed height (say height:300px; ) everything works. 我无法理解的是，当我将div设置为固定高度（例如height:300px; ）时，一切正常。 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. 因此，为什么我要尝试JS / JQ解决方案，但显然$(window).height()却在Chrome中获取文档高度，而不是“视口”高度。

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. http://azarel-howard.me/stage-management/props-manager/我已经尝试了一些JS解决方案，但是...它们似乎没有运行。 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 和CSS供参考：这些摘录直接从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? HTML5画布100％宽度视口高度？

Answer 1

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). 如果定义了相对宽度，则该宽度基于父元素的宽度，除非明确指定，否则是其内部其他内容（例如200px宽的图片）所强制施加的尺寸。

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. 我决定从这一角度开始进行基本介绍，并专注于背景颜色div来隔离因素。 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. 片刻之后，我决定进行一个简单的Google搜索，并很快从'08 http://forums.htmlhelp.com/index.php?showtopic=7543发现了这个论坛问题，然后您就可以了。

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. 为了使用百分比高度，必须明确地定义父元素的高度，从开始的HTML标签一直到其计数的元素。 With the exception of parent elements that have explicit px heights defined. 除了已定义显式px高度的父元素。

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. 因此，对于那些想要制作“全屏”应用程序的人（即包含在浏览器视口尺寸内的应用程序），我们需要包含以下CSS代码。

html, body {
    height: 100%;
}

or in my case the div row elements directly under the body also need this applied so 或者在我的情况下，直接在主体下方的div行元素也需要应用

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. 只需记住，从这一级别开始，您仍然需要为需要按比例缩放的每个元素包括内嵌样式声明。

Answer 2

Assuming your HTML is something along the lines of: 假设您的HTML符合以下方面：

<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/ 这是一个jsfiddle示例http://jsfiddle.net/7txqj/

可变高度，可滚动div，内容浮动

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-12-05 07:56:03

解决方案2
1 2013-11-28 01:33:05

可变高度，可滚动div，内容浮动

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-12-05 07:56:03

解决方案2 1 2013-11-28 01:33:05

解决方案1
2 已采纳 2013-12-05 07:56:03

解决方案2
1 2013-11-28 01:33:05