Question

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

这是我尝试过的最后两个。从理论上讲，他们有最好的工作机会，但......他们没有工作问题/ 2758651 /如何对变化高度DIV上窗口调整大小
问题/ 16837525 / resize-div-height-with-jquery

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

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

编辑：按要求编写代码;

<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中提取

.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% Width Height of Viewport?

Answer 1

好吧，我终于发现了使用身高百分比的秘诀！我将回答我自己的问题（尽管我认为这种形式有点糟糕但无论如何）。

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

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

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

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

html, body {
    height: 100%;
}

或者在我的情况下，正文下方的div行元素也需要这样应用

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

这将使一切变得不同。

请记住，从这个级别开始，您仍然需要为每个需要缩放百分比的元素添加内联样式语句。

Answer 2

假设您的HTML符合以下内容：

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

您可以使用以下样式声明实现独立滚动的侧边栏：

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

这是一个jsfiddle示例http://jsfiddle.net/7txqj/

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

2 个答案: