1

「行け！」が欲しい。ボタンをクリックして、各セクション内の残りの垂直領域を埋めます。セクションは、青色のテキストから各セクションの下部にある薄い灰色の境界線までの領域として定義されます。

現在、それは右上隅にぶら下がっています。

ご覧のとおり、各セクションのサイズは可変であるため、「静的な」ソリューションだけを使用することはできません。さらに、将来的には、各セクション内のコンテンツを動的に変更する可能性があります。これにより、さらにリフローが発生する可能性があります。

私は Twitter のブートストラップと Dart を使用しています。以下のコードは、各セクションのレンダリングに使用する Dart html です。

私の問題、ゴーはその親の垂直領域を埋めません

<!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>
4

3 に答える 3

2

If you make the div position: relative and the button absolute, you can set the height to fill:

http://jsfiddle.net/hyXYJ/

于 2013-04-08T23:59:07.383 に答える
2

there is not enough information there, but here is an example.

if your container div has relative positioning, then you can apsolute position the button. for example

div
{
position:relative;
}
button
{
position:absolute;
top:0;//it reach parent top
bottom:0;//it reach parent bottom
width:some width;
}

if you are using this approach, keep in mind the positioning of the other elements that are within the container div.

i've managed to create a fiddle with bootstrap included. Take a look

于 2013-04-08T23:59:30.497 に答える