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

问题描述：

我正在尝试构建这个Web应用程序的东西（它最终会为我的社区影院组提供舞台/道具/阙管理系统），我遇到了一个相当困难的问题。抱歉如果之前已经回答过这个问题，我当然找不到与此特定问题相关的任何内容。

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.

这是我尝试的最后两个问题。理论上他们有最好的工作机会，但......他们没有工作。

questions / 2758651 / how-to-change-height-div-on-window-resize

questions / 16837525 / resize-div-height-with-jquery

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

所以我正在做的是创建一个页面，调整大小以适应当前的屏幕空间我遇到的问题是*滚动div和'侧边栏'滚动div只有在它们有一个固定的高度时滚动。基本上如果我在CSS中使用百分比高度，无论 overflow：scroll; 如何设置，它都会成为其内容的大小。我认为这与所有 col - * - * 元素的 float：left; 定义有关。我无法理解的是，当我将div设置为固定高度（比如 height：300px; ）时，一切正常。因此，为什么我正在尝试JS / JQ解决方案，但显然甚至 $（窗口）.height（）在Chrome中获取文档高度而不是视口高度。

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.

这是一个固定高度的页面。 http://azarel-howard.me/stage-management/props-manager/ 我尝试了一些JS解决方案，但......它们似乎没有运行。或者他们遇到了同样的问题。

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.

编辑：代码按要求;

<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>

参考CSS：这些摘录直接从bootstrap.css中提取

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;
}

好的......我刚发现这显然应该可行我正在尝试它现在。

HTML5 Canvas 100％视口的宽度高度？

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

答

好了不久我发现了使用高度百分比的秘诀！我将回答我自己的问题（尽管我认为它有点糟糕，但无论如何）。

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).

宽度的百分比一切都按预期工作。如果定义了相对宽度，则它基于父元素宽度，除非明确指定，否则是由其内部的其他内容强制使用的大小（例如，宽度为200px的图片）。

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).

现在它在高度方面不起作用。我决定回到这个基础知识，并专注于背景颜色div来隔离因素。稍后我决定进行一次简单的谷歌搜索，并很快发现这个论坛问题来自'08 http://forums.htmlhelp.com/index.php?showtopic=7543 然后你去。

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.

为了使用百分比高度父元素的高度必须从开始的HTML标记一直明确定义到它计算的元素。除了定义了明确的px高度的父元素之外。

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.

因此对于我们这些想要制作全屏应用程序的应用程序（即那些包含在维度范围内的应用程序）浏览器视口）我们需要包含以下CSS代码。

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%;
}

或者在我的情况下，正文下方的div行元素也需要这个所以

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

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

这将有所不同。

请记住，从这个级别下来，您仍然需要为每个需要按百分比缩放的元素包含内联样式语句。

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.

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

相关推荐