html - How do I get an element to fill the remaining vertical area of its containing div? -


i want "go!" button fill remaining vertical area within each section. section defined area blue text light grey border @ bottom of each section.

right now, hangs out in top right corner.

as can see, each section variable in size, can't use "static" solution. furthermore, in future, may dynamically changing content within each section, cause further reflows.

i using twitter bootstrap , dart, code below dart html use rendering of each section.

my problem, go not fill vertical area of parent

<!doctype html>  <html>   <head>     <title>x-search-result</title>     <link rel="components" href="packages/widget/components/collapse.html">   </head>    <body>     <element name="x-search-result" constructor="searchresultcomponent" extends="div">       <template>         <div class="row-fluid" style="border-bottom: 1px solid #eee;">           <span class="span10">             <div class="accordion-heading" >               <a class="accordion-toggle" data-toggle="collapse">{{name}}</a>             </div>             <p>{{description}}</p>           </span>           <button class="btn span2" style="height:100%;" on-click="switchtocardview()">go!</button>           </div>         <script type="application/dart" src="xsearchresult.dart"></script>         <script src="packages/browser/dart.js"></script>       </template>     </element>   </body> </html> 

if make div position: relative , button absolute, can set height fill:

http://jsfiddle.net/hyxyj/


Comments

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -