Geek Answers Handbook

How can I make these panels a fluid with 100% height without a fixed height

I try to make these panels fully filled with the containers in which they are located, without a fixed height, initially I want them to occupy the entire height of the page,

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

I don’t want to provide this,

 height: 200px; max-height: 200px;
+7
jquery html css internet-explorer-8 twitter-bootstrap
source share
8 answers

I would recommend using% in css for the width and height from the root element to all child elements when working on a fluid layout, anyway, here is a little jQuery setup to achieve what you requested, I hope this helps .. :)

 $(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/

+1
source share

I think I understand what you want.

When you set the height on a collapsible element, Bootstrap JS redefines it using a style animation.

The solution I found sets max-height

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

Check my example

0
source share

Hope that’s what you mean.

https://jsfiddle.net/0fgnu99o/6/

 code
0
source share

it looks ok ...

 .panel { height: 300px; } #collapseOne, #collapseTwo { height:90%; max-height:90%; overflow-y:auto; }

... to use% heights correctly, you need to specify the height for the parent.

EDIT:

However, it is also fair to say that the parent .panel has a height of: 100%; but at some point on the stack, if you don't get to the html tag with height: 100% you will need to have an element with a fixed height so that the browser can correctly calculate the height

EDIT 2:

After further discussion with you in the chat, it is more than likely that this is what you need ...

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

0
source share

If you do not need Opera Mini support, you should use vh and possibly calc . You will want to play with it yourself and adjust the numbers, but I think something like this should work (moving from current goals to them):

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

Edit: just for clarity, vh refers to “viewport height,” so it’s specific to the end user’s viewport and calc allows the browser to allow some simple math. If you know that some other elements accept a fixed number of pixels, you can subtract them from the viewing height and stay within the viewing area.

0
source share

I do not know if you are looking for full growth. In any case, this will remove the scrollbar for the content. Please let me know.

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

Check out Flexbox ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )

This has many possibilities to make sure that 2 containers have the same height.

0
source share

If you remove the max-height property from a panel element, the parent will propagate to the end.

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

Fiddle: CLICK

-one
source share

More articles:


All Articles