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

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

html css dart

Html 如何获取元素以填充其包含div的剩余垂直区域？,html,css,dart,Html,Css,Dart,我希望“Go！”按钮填充每个部分内剩余的垂直区域。其中，节定义为从蓝色文本到每个节底部浅灰色边框的区域现在，它挂在右上角正如您所看到的，每个部分的大小都是可变的，所以我不能只使用“静态”解决方案。此外，在将来，我可能会动态更改每个部分中的内容，这将导致进一步的回流我正在使用twitter引导和Dart，下面的代码是我用于渲染每个部分的Dart html <!DOCTYPE html> <html> <head> <title>x

我希望“Go！”按钮填充每个部分内剩余的垂直区域。其中，节定义为从蓝色文本到每个节底部浅灰色边框的区域

现在，它挂在右上角

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

我正在使用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>


x-搜索结果
{{name}}
{{description}}
走！

如果将

div

位置设置为相对和按钮设置为绝对，则可以设置填充高度：
如果将div
位置设置为相对和按钮设置为绝对，则可以设置填充高度：
这里没有足够的信息，但这里有一个例子
如果容器div具有相对定位，则可以绝对定位按钮。
比如说
div
{
position:relative;
}
button
{
position:absolute;
top:0;//it reach parent top
bottom:0;//it reach parent bottom
width:some width;
}

如果使用这种方法，请记住容器div中其他元素的位置
我已经成功地创建了一个包含引导的。看一看
这里没有足够的信息，但这里有一个例子
如果容器div具有相对定位，则可以绝对定位按钮。
比如说
div
{
position:relative;
}
button
{
position:absolute;
top:0;//it reach parent top
bottom:0;//it reach parent bottom
width:some width;
}

如果使用这种方法，请记住容器div中其他元素的位置
我已经成功地创建了一个包含引导的。看一看
我的帖子是为了展示我从阿尔弗雷德的改变中得到了什么

修改后的代码如下：
<!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>


x-搜索结果
{{name}}
{{description}}
走！
我发帖是为了展示我从阿尔弗雷德的改变中得到了什么

修改后的代码如下：
<!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>


x-搜索结果
{{name}}
{{description}}
走！
你也能提供一些css吗？我只使用twitter引导，其他css都是内联样式。（啊，别对我大喊大叫！我很抱歉！）所以那些从未使用过Bootstrap的人应该先下载它？：/你们能不能给按钮一个100%的高度？你们是在固定宽度模式下使用引导还是在响应模式下使用引导？马克-我使用的是固定模式，尽管每一行都是流动的。pzin-我实际上尝试了100%的东西（在代码中），没有骰子。你也能提供一些css吗？除了twitter引导，我没有使用css，所有其他css都是内联样式。（啊，别对我大喊大叫！我很抱歉！）所以那些从未使用过Bootstrap的人应该先下载它？：/你们能不能给按钮一个100%的高度？你们是在固定宽度模式下使用引导还是在响应模式下使用引导？马克-我使用的是固定模式，尽管每一行都是流动的。pzin-我实际上尝试了100%的东西（它在代码中），没有骰子。这应该在引导中起作用。我会采用这种方法。这应该在引导中起作用。我会采用这种方法。你可能会注意到我必须关闭按钮。你可能会注意到我必须关闭按钮。