Can't fit a panel inside a Twitter Bootstrap 3 column grid

Question

I have the following CSS and HTML code :

 .container-fluid{ height:100%; } html,body,.container { height:100%; } .container { display:table; width: 100%; margin-top: -50px; padding: 50px 0 0 0; /*set left/right padding according to needs*/ box-sizing: border-box; } /**/ .container-fluid { height:100%; display:table; width: 100%; margin-top: -50px; padding: 50px 0 0 0; /*set left/right padding according to needs*/ box-sizing: border-box; } .row { height: 100%; display: table-row; } .row .no-float { display: table-cell; float: none; } <!-- begin snippet: js hide: false console: true babel: false --> 

 <div class="container-fluid"> <div class="row"> <div class="col-sm-12 col-md-7 col-lg-7 no-float" style="padding: 0 !important; border: solid blue"> <iframe src="http://exame.abril.com.br/tecnologia/facebook/noticias/facebook-nao-tem-planos-de-voltar-a-china-diz-executivo" style="border: none;"></iframe> </div> <div class="col-sm-12 col-md-5 col-lg-5 no-float" style=" padding:0; border: solid red"> <div class="row"> <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black "> <div class="panel-heading">QUESTIONS</div> <div class="panel-body"> <div> <a> <form style="display: inline-block; "> <div class="input-group col-md-12"> <input type="text" class=" search-query form-control" placeholder="Recherche une question sur ce contenu" /> <span class="input-group-btn"> <button class="btn btn-default" type="button" > <span class=" glyphicon glyphicon-search"></span> </button> </span> </div> </form> </a> </div> <div> <button type="button" class="btn btn-question">Ask new question</button> </div> </div> </div> </div> </div> </div> </div> 

I want the panel (with questions title) fitting the whole div with class="col-sm-12 col-md-5 col-lg-5 no-float" (100% full height, 100% full width), just like the iframe in the first div, but I've got something like this:

I firstly had issues with columns full height, that I solved reading this post Now I have an issue to fit the panel into a column grid, but I can't even after reading this post

Please how can you help me ?

Answer 1

You have an extra row added and tables don't work like that. That combined with having new vertical alignment set was forcing the questions panel down. Try this and let me know if it works!

 <div class="col-sm-12 col-md-5 col-lg-5  no-float" style="vertical-align:top; padding:0; border: solid red">
            <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black ">
                <div class="panel-heading">QUESTIONS</div>
                <div class="panel-body">
                    <div>
                        <a>
                            <form style="display: inline-block;  ">
                                <div class="input-group col-md-12">
                                    <input type="text" class="  search-query form-control" placeholder="Recherche une question sur ce contenu">
                                    <span class="input-group-btn">
                                            <button class="btn btn-default" type="button">
                                                <span class=" glyphicon glyphicon-search"></span>
                                            </button>
                                        </span>
                                </div>
                            </form>
                        </a>
                    </div>
                    <div>
                        <button type="button" class="btn btn-question">Ask new question</button>
                    </div>          
                </div>
            </div>
        </div>

 .container-fluid{ height:100%; } html,body,.container { height:100%; } .container { display:table; width: 100%; margin-top: -50px; padding: 50px 0 0 0; /*set left/right padding according to needs*/ box-sizing: border-box; } /**/ .container-fluid { height:100%; display:table; width: 100%; margin-top: -50px; padding: 50px 0 0 0; /*set left/right padding according to needs*/ box-sizing: border-box; } .row { height: 100%; display: table-row; } .row .no-float { display: table-cell; float: none; vertical-align:top; } <!-- begin snippet: js hide: false console: true babel: false --> 

 <div class="container-fluid"> <div class="row"> <div class="col-sm-12 col-md-7 col-lg-7 no-float" style="padding: 0 !important; border: solid blue"> <iframe src="http://exame.abril.com.br/tecnologia/facebook/noticias/facebook-nao-tem-planos-de-voltar-a-china-diz-executivo" style="border: none;"></iframe> </div> <div class="col-sm-12 col-md-5 col-lg-5 no-float" style=" padding:0; border: solid red"> <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black "> <div class="panel-heading">QUESTIONS</div> <div class="panel-body"> <div> <a> <form style="display: inline-block; "> <div class="input-group col-md-12"> <input type="text" class=" search-query form-control" placeholder="Recherche une question sur ce contenu" /> <span class="input-group-btn"> <button class="btn btn-default" type="button" > <span class=" glyphicon glyphicon-search"></span> </button> </span> </div> </form> </a> </div> <div> <button type="button" class="btn btn-question">Ask new question</button> </div> </div> </div> </div> </div> </div>