Question

我正在使用gridster.js库在页面上以类似网格的方式显示一堆项目。这会导致所有项目都具有position:absolute和固定的高度/宽度。在每个项目中我想要一个标题和一个正文，所以它看起来像

-------------------
|       header     |
|                  |
-------------------
|                  |
|       body       |
|                  |
|                  |
|                  |
|                  |
--------------------

问题在于我希望body部分完全填满父级的高度，并且不会溢出它或者与它短路。自然发生的事情是高度正好是其内容的高度，所以如果身体中只有1个单词，那么它只有几个像素高，但如果它的内容很多，那么它会溢出父元素。我想要的是让身体“填满”容器，这样我就可以将overflow-y:scroll添加到身体上，它将在身体部分内滚动。

在这种情况下，有没有办法获得此功能？

实施例 http://jsfiddle.net/np66ojub/

Answer 1

如果我需要一个子元素来填充父元素的全宽和全高，我要做的是将父元素的位置设置为position: relative;，这样我就可以将position: absolute;应用于子元素元件。通过绝对定位，我可以将top, right, bottom, left设置为0，这会将子元素拉伸到父元素的边界。

以下示例适用于固定高度标题元素。将top设置为等于标题的高度。

<强> HTML

<div class="card">
    <header>Header</header>
    <div class="body">
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
    </div>
</div>
<div class="card">
    <header>Header</header>
    <div class="body">
        Content here.
    </div>
</div>
<div class="card">
    <header>Header</header>
    <div class="body">
        Content here.
    </div>
</div>
<div class="card">
    <header>Header</header>
    <div class="body">
        Content here.
    </div>
</div>
<div class="card">
    <header>Header</header>
    <div class="body">
        Content here.
    </div>
</div>

<强> CSS

.body {
    position: absolute;
    top: 25px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #eee;
    overflow-y: scroll;
}
.card {
    position: relative;
    float: left;
    margin: 5px;
    border: 1px solid #ccc;
    width: 200px;
    height: 200px;
}

jsFiddle：http://jsfiddle.net/vt0gww7v/

Answer 2

没有代码：

如果将parent设置为position：relative，则所有内部元素都可以使用position：absolute，它们将相对于父元素。

所以，让我们来表示你的＆＃34;图表＆＃34;是＆＃39; .block＆＃39;，然后：

<强> CSS 。页{ 位置：相对; } 。块{ 位置：绝对的; 保证金：5px的; } .block容器{ 位置：相对; }

.c{
 width:100px;
    height:150px;
    background-color:red;
    top:100px;
}
.a{
 width:70px;
    height:70px;
    background-color:green;
     left:100px;
}
.b{
 width:50px;
    height:60px;
    background-color:blue;
}

<强> HTML

<div class="page">
    <div class="block a">
        <div class="block-container">
           <div class="header">aaaa dsaa as  </div>
           <div class="body">bbbb  sdad </div>
        </div>
    </div>
    <div class="block b">
        <div class="block-container">
           <div class="header">aaaa dsaa as  </div>
           <div class="body">bbbb  sdad </div>
        </div>
    </div>
    <div class="block c">
        <div class="block-container">
           <div class="header">aaaa dsaa as  </div>
           <div class="body">bbbb  sdad </div>
        </div>
    </div>
</div>

Fiddle

Answer 3

如果已知标题块的高度，则只需：

.body
{
  max-height: 80%; 
  /* Change to the (100-height) of the header Block. */
}

否则一小段jQuery可以解决这个问题：

$(".item").each(function()
{
    var c=$(".item");
    var header=c.find(".header");
    var body=c.find(".body");
    body.css("max-height",c.height()-header.height());
}

还在body类

中设置overflow-y：auto

假设每个绝对定位的块都有一个item类，每个头都有一个header类，每个body都有一个body类。

有子元素填充父元素的其余部分吗？

3 个答案: