3

我需要定义一个div必须保持在正常位置的顶部，这与周围元素的顶部不同：

position:relative
top:0

并且高度增长到周围元素的大小：

position:absolute
bottom:0

我不知道如何将两者结合起来。每当我使用相对框时，我会松开绝对底部，而每当我使用绝对框时，我会松开相对顶部。

任何人都可以帮助我如何在 CSS 中做到这一点吗？

这是一个例子：

<html>
  <head>
  </head>
  <style type="text/css">
  @media screen {
      body {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: 0;
          padding: 0;
      }
      #head {
          background-color: gray;
      }
      #rel {
          background-color: green;
          position: relative;
          top: 0;
          bottom: 0;
          float: left;
      }
      #abs {
          background-color: red;
          position: absolute;
          top: 0;
          bottom: 0;
          float: left;
      }
  }
  </style>
  <body>
    <div id="head">
      <h1>Head</h1>
    </div>
    <div id="abs">
      <h2>absolute</h2>
    </div>
    <div id="rel">
      <h2>relative</h2>
    </div>
  </body>
</html>

“相对”根本不增长，“绝对”增长太多。

4

3 回答 3

2 
div {
    top:0;
    height:100%; /* height calculated based off the height of parent element */
    margin:0;
}

高度属性 CSS

于 2012-09-14T15:21:32.830 回答
0

在外部 div 上使用 display:table 并在内部 div 上显示 table-row：见这个小提琴：http: //jsfiddle.net/JKQ2y/15/ Html：

<div class="outer">
  <div class="rel">
    <div class="m b">text</div>
  </div>
  <div class="inner">
    <div class="m r"></div>
  </div>
</div>

CSS：

.outer{
  border:1px solid black;
  height:100px; width: 100px
  display:table;
}
.rel {
  height:30px;
  display:table-row;
}
.inner {
  border: 1px solid red;
  position:relative;
  display:table-cell;
}
.m {height:100%;}
.m.b {border:1px solid blue;}
.m.r {border:1px solid red;}
于 2013-05-26T21:34:05.070 回答
0

HTML：

<div class="body">
  <div class="head">
    <div class="head-content">text</div>
  </div>
  <div class="growing-area">
  </div>
</div>

CSS：

.body{
  height:100px; width: 100px;
  display:table;
}
.head {
  height:0px;
  display:table-row;
}
.growing-area {
  position:relative;
  display:table-cell;
}

定义头部的小高度很重要，但实际大小由内容控制，或者您可以定义头部内容高度：

.head-content {
  height:30px;
 }

小提琴：http: //jsfiddle.net/JKQ2y/36/

于 2017-12-02T05:38:58.050 回答