1. Zuhause
  2. Frage und Antwort
  3. Wie kann ich diese Platten mit 100% Höhe ohne feste Höhe flüssig machen

Wie kann ich diese Platten mit 100% Höhe ohne feste Höhe flüssig machen

2016-02-12 5 views
7

Ich versuche, diese Platten in voller Länge von Container nehmen sie sind, ohne feste Höhe, zunächst möchte ich, dass sie alle die Höhe von die Seite,Wie kann ich diese Platten mit 100% Höhe ohne feste Höhe flüssig machen

Fiddle - https://jsfiddle.net/0fgnu99o/10/

HTML

<div class="container"> 
    <div class="row"> 
    <div class="column"> 
     <h3 style="display: inline-block;">{{vm.Title}}</h3> 
     <h4 class="pull-right" style="margin-top: 20px;">Back</h4> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default" id="panel1"> 
     <div class="panel-heading" data-toggle="collapse" data-target="#collapseOne"> 
      <h4 class="panel-title">Panel 1</h4> 

     </div> 
     <div id="collapseOne" data-parent="#accordion" class="panel-collapse collapse in"> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li> 

     </div> 
     </div> 
     <div class="panel panel-default" id="panel2"> 
     <div class="panel-heading" data-toggle="collapse" data-target="#collapseTwo"> 
      <h4 class="panel-title">Panel 2</h4> 

     </div> 
     <div id="collapseTwo" data-parent="#accordion" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul class="list-group"> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

CSS

.panel-heading a:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e114"; 
    float: right; 
} 

.panel-heading a.collapsed:after { 
    content: "\e080"; 
} 

#collapseOne, 
#collapseTwo { 
    height: 200px; 
    max-height: 200px; 
    overflow-y: auto; 
}

Ich möchte nicht, dies zu liefern,

height: 200px; 
    max-height: 200px;

Quelle

2016-02-12 Mathematics

+1

ich nicht bekommen, was Sie wirklich wollen. Möchten Sie Ihre Panels etwas klein haben, damit beide auf den Bildschirm passen (einer unter dem anderen) und der Inhalt darin scrollbar ist? – Maverick

+1

nicht sicher, dass ich Ihre Frage verstanden habe, aber ich aktualisierte die JSFiddle ... bitte überprüfen Sie https://jsfiddle.net/0fgnu99o/4/ – RRR

+1

Das ist, was ich meine. http://i.imgur.com/fbRk0jd.png – Maverick

Antwort

1

ich empfehlen würde für Breite und Höhe% in CSS zu verwenden, um von Wurzelelement zu allen Kindelementen während der Arbeit an Flüssigkeit Layout, sowieso hier ist eine kleine jQuery zwicken um zu erreichen, was Sie gefragt haben, ich hoffe, dass dies hilft .. :)

$(document).ready(function() { 
 

 

 
    var $offHeight = 0 
 

 
    function updateHeight() { 
 
    var $tempHeight = 0; 
 
    var $wrapper = $('.mainContainer'); 
 
    $tempHeight += $('.row').not('.mainRow').outerHeight(); 
 
    $tempHeight += $('#panel1').find('.panel-heading').outerHeight(); 
 
    $tempHeight += $('#panel2').find('.panel-heading').outerHeight() + 5 + 4; // +5 for margin-top of panel 2 header and +4 for adjustment 
 
    $offHeight = $wrapper.height() - $tempHeight; 
 
    $('#collapseOne').css({ 
 

 
     'max-height': $offHeight 
 
    }); 
 
    $('#collapseTwo').css({ 
 

 
     'max-height': $offHeight 
 
    }); 
 

 

 

 
    } 
 

 
    updateHeight(); 
 

 

 
    $('.panel-heading').on('click', function() { 
 

 
    updateHeight(); 
 

 

 

 
    }); 
 

 
    $(window).resize(function() { 
 

 

 
    updateHeight(); 
 

 
    }); 
 

 

 
});
/*make parent of "container" fixed width and height*/ 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100% 
 
} 
 
/*fill "container" to its parent width and height*/ 
 

 
.mainContainer { 
 
    width: 100%; 
 
    height: 100% 
 
} 
 
/*extra margin-bottom fix*/ 
 

 
#accordion { 
 
    margin: 0 
 
} 
 
.panel-heading a:after { 
 
    font-family: 'Glyphicons Halflings'; 
 
    content: "\e114"; 
 
    float: right; 
 
} 
 
.panel-heading a.collapsed:after { 
 
    content: "\e080"; 
 
} 
 
#collapseOne, 
 
#collapseTwo { 
 
    overflow-y: auto; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet" /> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container mainContainer"> 
 
    <div class="row"> 
 
    <div class="column"> 
 
     <h3 style="display: inline-block;">{{vm.Title}}</h3> 
 
     <h4 class="pull-right" style="margin-top: 20px;">Back</h4> 
 
    </div> 
 
    </div> 
 
    <div class="row mainRow"> 
 
    <div class="panel-group" id="accordion"> 
 
     <div class="panel panel-default" id="panel1"> 
 
     <div class="panel-heading" data-toggle="collapse" data-target="#collapseOne"> 
 
      <h4 class="panel-title">Panel 1</h4> 
 

 
     </div> 
 
     <div id="collapseOne" data-parent="#accordion" class="panel-collapse collapse in"> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 
      <li class="list-group-item">Panel 1<i class="pull-right">Delete</i> 
 
      </li> 
 

 
     </div> 
 
     </div> 
 
     <div class="panel panel-default" id="panel2"> 
 
     <div class="panel-heading" data-toggle="collapse" data-target="#collapseTwo"> 
 
      <h4 class="panel-title">Panel 2</h4> 
 

 
     </div> 
 
     <div id="collapseTwo" data-parent="#accordion" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
      <ul class="list-group"> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
       <li class="list-group-item">Panel 2<i class="pull-right">Delete</i> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/ajrycq33/1/

Quelle

2016-02-23 10:32:02

+0

Hallo mike, danke für deine Antwort, auch wenn das nicht genau das ist, was ich wollte, aber es wird für mich funktionieren, kannst du bitte ein JFiddle hinzufügen, damit ich es schnell testen und dir die Bounty geben kann was wird in einer Stunde verschwendet werden, danke für Ihre Hilfe – Mathematics

+0

https://jsfiddle.net/ajrycq33/1/ hier gehen Sie. –

+0

danke Mike, es scheint wie funktioniert, ich akzeptiere Ihre Antwort, noch einmal vielen Dank – Mathematics

0

Ich glaube, ich verstanden, was Sie wollen.

Wenn Sie die Höhe für ein reduzierendes Element festlegen, überschreibt Bootstrap JS diese mit seiner Stilanimation.

Die Lösung, die ich gefunden setzt die max-height

.panel-collapse{ 
    max-height: 200px; 
    overflow-y: auto; 
}

Check My Example

Quelle

2016-02-12 10:22:44 Maverick

0

dies scheint schau ok ...

.panel { height: 300px; } 

#collapseOne, #collapseTwo { 
    height:90%; 
    max-height:90%; 
    overflow-y:auto; 

}

... Um% Höhen richtig zu verwenden, müssen Sie eine Höhe für das übergeordnete Element angeben.

EDIT:

Es ist aber auch gültig zu sagen, dass die Mutter .panel Höhe hat: 100%; aber an einem Punkt im Stapel, wenn Sie nicht bis zum html-Tag mit Höhe gehen: 100% müssen Sie ein Element mit einer festen Höhe haben, damit der Browser die Höhe korrekt berechnen kann

EDIT 2:

bei der weiteren Diskussion mit Ihnen in der Chat ist es mehr als wahrscheinlich, dass das ist, was Sie brauchen ...

http://jqueryui.com/accordion/#fillspace

Quelle

2016-02-16 12:03:37 War

+0

Ich versuche jQuery UI accordin wie vorgeschlagen, aber es ist nicht flüssig, es dauert nicht die ganze Höhe und reagiert nicht (ich kann JS dafür verwenden, aber ich möchte Out-of-Box-Lösung für dieses Szenario) http: // jsfiddle.net/r4Lzsmhf/2/ – Mathematics

-1

Wenn Sie nur Eigenschaft max-height von Plattenelement entfernen, Eltern werden sich den ganzen Weg hinunter ausbreiten.

#collapseOne, #collapseTwo { 
overflow-y:auto; 
}

Fiddle: CLICK

Quelle

2016-02-16 12:51:11 Zivanovic

0

Wenn Sie Opera Mini unterstützen müssen sollten Sie in der Lage sein vh und möglicherweise calc zu verwenden.Sie werden sich mit ihm spielen wollen und die Zahlen zwicken, aber ich denke, so etwas wie dies funktionieren sollte (Wechsel von der aktuellen Ziele zu diesen):

#panel1, #panel2 { 
    max-height: calc(100vh - 150px); 
    overflow-y:auto; 
}

Edit: Nur aus Gründen der Klarheit bezieht sich vh zu ‚Ansichtsfenster height ', so dass es spezifisch für das Ansichtsfenster des Geräts des Endbenutzers ist und calc Ihnen erlaubt, den Browser mit ein paar einfachen Berechnungen zu beschäftigen. Wenn Sie wissen, dass bestimmte andere Elemente eine feste Anzahl von Pixeln benötigen, können Sie sie von der Höhe des Ansichtsfensters subtrahieren und im Ansichtsfenster bleiben.

Quelle

2016-02-21 21:07:21 denmch

0

Ich weiß nicht, ob Sie nach voller Höhe suchen. Wie auch immer, das wird die Bildlaufleiste für den Inhalt entfernen. Lass es mich wissen, bitte.

#collapseOne, #collapseTwo { 
height: auto; 
max-height: none; 
overflow-y: auto; 
}

Quelle

2016-02-22 18:39:40

 Verwandte Themen

  • Keine verwandten Themen^_^