Переменная высота, прокручиваемый div, содержимое плавает

0

Я пытаюсь создать это приложение для веб-приложений (это будет в конечном итоге система управления сценой/реквизитом /que для моей группы общественных театров), и я столкнулся с довольно сложной проблемой. Извиняюсь, если раньше был дан ответ на этот вопрос, я, конечно, не мог найти ничего, связанного с этой конкретной проблемой.

Вот последние два, которые я пробовал. Теоретически у них есть лучшие шансы на работу, но... они не работают.
вопросы/2758651/как к изменению высоты-Div-на-оконных изменений размера
вопросы/16837525/размер-ДИВ-высота-с JQuery

Так что я делаю создание страницы, которая изменяет размер, чтобы соответствовать текущему экрану недвижимости, с которой я сталкиваюсь, - это центральный прокручиваемый div, а прокрутка div "sidebar" прокручивается только тогда, когда у них фиксированная высота. В основном, если я использую процентную высоту в моем CSS, он становится размером с его содержимым, независимо от того, как overflow: scroll; это настройка. Я думаю, что это имеет какое-то отношение к float:left; определение всех col-*-*. То, что я не могу понять, заключается в том, что когда я устанавливаю div на фиксированную высоту (например, height:300px;), все работает. Следовательно, почему я пытаюсь использовать JS/JQ-решения, но, видимо, даже $(window).height() получает высоту документа в Chrome, а не высоту "viewport".

Здесь страница, как она стоит с фиксированной высотой. 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 repeated for each scene -->
      <div class="scene row">
        <h4>Scene 1</h4>
        <div class="container">
          <!-- This script block get 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 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 100% Ширина Высота видового экрана?

  • 0
    Можете ли вы привести пример кода того, что вы пробовали, или jsfiddle?
  • 0
    Я давно не занимался веб-разработкой, так что нет, это не на jsfiddle. Хм, я отредактирую свой оригинальный вопрос с помощью некоторого кода.
Показать ещё 2 комментария
Теги:
twitter-bootstrap-3

2 ответа

2
Лучший ответ

Хорошо, наконец, я обнаружил секрет использования процентов по высоте! Я собираюсь ответить на свой вопрос (хотя я думаю, что это несколько плохая форма, но в любом случае).

В процентах от ширины все работает так, как ожидалось. Если определена относительная ширина, она основана на ширине родительских элементов, которая, если явно не назначена, - это размер, наложенный на нее другим содержимым внутри (скажем, изображение шириной 200 пикселей).

Теперь это не работает с высотой. Я решил вернуться к основам с этим и сосредоточиться на фоном-цвете div, чтобы изолировать фактор. Через некоторое время я решил, что простой поиск в Google был в порядке, и очень быстро открыл этот вопрос на форуме с '08 http://forums.htmlhelp.com/index.php?showtopic=7543 и там вы идете.

Чтобы использовать процентную высоту, высота родительского элемента ДОЛЖНА быть EXPLICITLY определена из открытого HTML-тега вплоть до элемента, где он подсчитывается. За исключением родительских элементов, которые имеют четные высоты пикселей.

Поэтому для тех из нас, кто хочет создавать полноэкранные приложения (т.е. Те, которые содержатся в размерах окна просмотра браузера), нам нужно включить следующий код CSS.

html, body {
    height: 100%;
}

или в моем случае элементы div-строки непосредственно под телом также нуждаются в этом, поэтому

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

и это будет иметь значение.

Просто помните, что с этого уровня вам все равно нужно будет включать в себя строковые инструкции для каждого элемента, который должен быть масштабирован в процентах.

Поделиться
1

Предполагая, что ваш 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/

Поделиться
  • 0
    нет, пожалуйста, посмотрите на страницу, на которую я ссылался azarel-howard.me/stage-management/props-manager, используйте ctrl + u или щелкните правой кнопкой мыши + элемент inspect для просмотра кода.
  • 0
    или просто прочитайте мой отредактированный вопрос. :)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню