1

我想要“走！” 按钮填充每个部分中剩余的垂直区域。其中一个部分被定义为从蓝色文本到每个部分底部的浅灰色边框的区域。

现在，它挂在右上角。

如您所见，每个部分的大小都是可变的，所以我不能只使用“静态”解决方案。此外，将来我可能会动态更改每个部分的内容，这会导致进一步的回流。

我正在使用 twitter bootstrap 和 Dart，下面的代码是我用于渲染每个部分的 Dart html。

我的问题， go 没有填充其父级的垂直区域

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

如果你做div position: relative和button绝对，你可以设置高度来填充：

http://jsfiddle.net/hyXYJ/

于 2013-04-08T23:59:07.383 回答
2

那里没有足够的信息，但这里有一个例子。

如果您的容器 div 具有相对定位，那么您可以绝对定位按钮。例如

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

如果您使用这种方法，请记住容器 div 中其他元素的位置。

我设法创建了一个包含引导程序的小提琴。看一看

于 2013-04-08T23:59:30.497 回答
1

我发帖是为了展示我从 Alfred 的变化中得到了什么。

不会赢得任何设计奖项，但更接近

修改后的代码如下：

<!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="position:relative; 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 offset10 span2" style="position:absolute; top:0; bottom:0;" 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>
于 2013-04-09T00:09:58.453 回答