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.
<!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:
Comments
Post a Comment