2016-10-26 10 views
0

Ich habe mit Fragen ähnlich wie diese, aber keiner von ihnen löst mein Problem an mehrere Post hier einen Blick habe.Div Höhe Überlauf Inhalt

Hier poste ich den HTML-Code:

 <div id="scroller" class="general_scrollingContainer" layout="column" layout-fill layout-align="top left"> 
      <ul class="dynamic-grid" angular-grid="pics" 
             ag-grid-width="200" 
             ag-gutter-size="10" 
             ag-id="gallery" 
             refresh-on-img-load="true"> 
       <li class="grid" ng-repeat="product in products"> 
        <a ng-href="{{product.link_shop}}" target="_blank"> 
         <img class="grid-img" ng-src="{{product.url_imagen}}" /> 
        </a> 
        <div class="img-desc-wrap" layout="column" layout-fill layout-align="top left"> 
          <a class="title" ng-href="{{product.link_shop}}" target="_blank" style="font-size:12px;line-height:16px"> 
           {{product.title}} 
          </a> 
          <div class="date"><b>Category</b>: {{product.category_name}}</div> 
          <div class="object_icons_holder" layout="row" layout-align="space-between stretch"> 
           <div flex layout-align="start center" layout="row"> 
            <ng-md-icon icon="share" size="30" style="fill:#666;margin:-5px 0 0 10px" class="social_icon" aria-label="Share Product" 
               ng-click="showSocialShare($event, 0)"> 
             <md-tooltip md-direction="top"> 
              Share in Social Networks 
             </md-tooltip> 
            </ng-md-icon> 

           </div> 
           <div class="shop_price">{{product.price}}</div> 
          </div> 
        </div> 
       </li> 
      </ul> 
     </div> 

Die CSS für die Klasse general_scrollingContainer:

.general_scrollingContainer { 
    overflow-y: scroll; 
    padding: 0 10px; 
    width: 100%; 
} 

und Javascript mit einem Ereignis, das die sichtbare Höhe des div ändern Sie die Größe anpassen :

$(window).resize(function() { 
    var $main_container = $(window).height(); 
    $(".general_scrollingContainer").css({ 
     "height": ($main_container - 160) + 'px' 
    }); 
}); 

Das Hauptdiv ' general_scrollingContainer 'eine feste Höhe auf der Fensterhöhe in Abhängigkeit und im Innern sind die Elemente, die den sichtbaren Bereich überlaufen.

Die Frage ist, dass ich versuche, um das Ereignis zu erhalten, wenn auf den Boden und muß die reale Höhe des div einschließlich der Höhe nicht sichtbar gescrollt.

Mit $('div.general_scrollingContainer').innerHeight(), zeigt nur die Höhe des sichtbaren Bereichs des DIV, der gleiche Wert wie $('div.general_scrollingContainer').height(), so weiß ich nicht, wie man die gesamte Höhe zu bekommen.

Irgendwelche Hilfe?

Antwort

0

Für die Höhe Ihrer Inhalte innerhalb des div die Höhe des ul-Element erhalten. Wenn Sie mehrere Elemente haben, können Sie sie in ein anderes Inner-Content-Div einfügen und die Höhe davon erreichen.