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 で display 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 に答える