如何获取元素以填充其包含div的其余垂直区域？

Question

I want the "Go!" 我要“走！” button to fill the remaining vertical area within each section. 按钮填充每个部分中的其余垂直区域。 Where a section is defined as the area from the blue text to the light grey border at the bottom of each section. 区域定义为每个区域底部从蓝色文本到浅灰色边框的区域。

Right now, it hangs out in the top right corner. 现在，它挂在右上角。

As you can see, each section is variable in size, so I can't just use a "static" solution. 如您所见，每个部分的大小都是可变的，因此我不能仅使用“静态”解决方案。 Furthermore, in the future, I may be dynamically changing the content within each section, which would cause further reflows. 此外，将来，我可能会动态更改每个部分中的内容，这将导致进一步的重排。

I am using twitter bootstrap and Dart, the code below is the Dart html I use for the rendering of each section. 我正在使用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>

Answer 1

If you make the div position: relative and the button absolute, you can set the height to fill: 如果将div position: relative设为position: relative和button absolute，则可以设置填充高度：

http://jsfiddle.net/hyXYJ/ http://jsfiddle.net/hyXYJ/

Answer 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. 如果您的容器div具有相对定位，则可以绝对定位按钮。 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. 如果使用这种方法，请记住容器div中其他元素的位置。

i've managed to create a fiddle with bootstrap included. 我设法创建了一个带有引导程序的小提琴。 Take a look 看一看

Answer 3

I am posting to show what I got with Alfred's changes. 我要发布以显示我对Alfred所做的更改所获得的收益。

不会获得任何设计奖，但是更接近

The modified code is as follows: 修改后的代码如下：

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

如何获取元素以填充其包含div的其余垂直区域？

问题描述

3 个解决方案

解决方案1
2 已采纳 2013-04-08 23:59:07

解决方案2
2 2013-04-08 23:59:30

解决方案3
1 2013-04-09 00:09:58

如何获取元素以填充其包含div的其余垂直区域？

问题描述

3 个解决方案

解决方案1 2 已采纳 2013-04-08 23:59:07

解决方案2 2 2013-04-08 23:59:30

解决方案3 1 2013-04-09 00:09:58

解决方案1
2 已采纳 2013-04-08 23:59:07

解决方案2
2 2013-04-08 23:59:30

解决方案3
1 2013-04-09 00:09:58