Próbuję zbudować tę aplikację internetową (w końcu jest w końcu Stage / Rekwizyjnie / Que Management System dla mojej grupy teatralnej) i napotkałem dość trudny problem. Przepraszam, jeśli to pytanie zostało wcześniej odpowiedzieć, na pewno nie mogłem znaleźć niczego związanego z tym konkretnym problemem.

Oto dwa ostatnie, które próbowałem. Teoretycznie mają najlepszą szansę na pracę, ale ... nie działają.
Pytania / 2758651 / How-To-Change-Height-Div-On-Window-Resize
Pytania / 16837525 / Resize-Div-wysokości-z jQuery

Więc to, co robię, tworzy stronę, która zmienia rozmiar, aby pasowała do bieżącego ekranu nieruchomości, problem, który mam, jest centralnym przewijaniem div i przewijaniem DIV "" Sidebar's "przewijanie, gdy mają stałą wysokość. Zasadniczo jeśli używam procentowej wysokości w moim CSS, staje się wielkością jego zawartości niezależnie od tego, jak ustawia się overflow: scroll;. Myślę, że ma coś wspólnego z definicją float:left; na wszystkich elementach col-*-*. Rzecz, której nie mogę, to, że kiedy wyznaczę div stałą wysokość (powiedzmy {x3}}) Wszystko działa. Dlatego staram się rozwiązania JS / JQ, ale najwyraźniej nawet $(window).height() otrzymuje wysokość dokumentu w chromie, a nie wysokości "rzutni".

Oto strona, jak stoi o stałej wysokości. http://azarel-howard.me/stage-management/props-manager/ Próbowałem garść rozwiązań JS, ale ... nie biegają. Lub biegają w tych samych kwestiach.

Edytuj: Kod zgodnie z żądaniem;

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

A CSS w celach informacyjnych: Te fragmenty są wyodrębnione bezpośrednio z 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 ... Właśnie znalazłem to, które najwyraźniej powinno pracować, próbuję go teraz.
HTML5 Canvas 100% Szerokość Wysokość rzutni?

0
azariah 28 listopad 2013, 05:05

2 odpowiedzi

Najlepsza odpowiedź

Ok, na długo odkryłem tajemnicę używania procentów wysokości! Odpowiem na moje własne pytanie (chociaż myślę, że to nieco zła forma, ale w każdym razie).

Z procentami szerokości wszystko działa zgodnie z oczekiwaniami. Jeśli zdefiniowano względną szerokość, jest on oparty na szerokości elementów macierzystej, który chyba że wyraźnie przypisany jest rozmiar, czy rozmiar jest wymuszony przez drugą zawartość wewnątrz niego (powiedz obraz o szerokości 200 pikseli).

Teraz nie działa w ten sposób z wysokością. Postanowiłem wrócić do podstaw z tym i skoncentrowałem się na kolorowym tle Div izolować współczynnik. Po nieco zdecydowałem, że proste wyszukiwanie Google było w porządku, i bardzo szybko odkrył pytanie o forum z '08 http://forums.htmlhelp.com/index.php?showtopic=7543 i tam.

W celu wykorzystania wysokości procentowej Wysokość elementu macierzystego musi być wyraźnie zdefiniowana z otwierającym znacznika HTML w dół do elementu, w którym się liczy. Z wyjątkiem elementów macierzystego, które mają wyraźne wywyższenia px.

Więc dla tych, którzy chcą wykonać "FullsCreen" aplikacji (tj. Te, które są zawarte w wymiarach widzenia przeglądarki), musimy włączyć następujący kod CSS.

html, body {
    height: 100%;
}

Lub w moim przypadku elementy DIV rzędowe bezpośrednio pod ciałem również wymagają tego

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

I to sprawi, że różnica.

Pamiętaj tylko, że z tego poziomu w dół nadal będziesz musiał zawierać instrukcje w stylu w linii dla każdego elementu, który musi być skalowany procentowy.

2
azariah 5 grudzień 2013, 07:56

Zakładając, że Twój HTML jest czymś wzdłuż linii:

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

Możesz osiągnąć niezależnie przewijany pasek boczny z następującymi deklaracjami stylów:

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

Oto przykład jsfiddle http://jsfiddle.net/7txqj/

1
monners 28 listopad 2013, 01:33