0

次のような html があります。その SIDEBAR の高さを 100% に設定したいのですが、いつもとは限らない多くの方法を試しました。誰かがその方法を教えてくれませんか?

ps親要素の高さを設定するのではなく、自動の高さであることを願っています!

<!DOCTYPE html>
<html>
  <head>
      <meta charset='UTF-8' />
      <style>
      * {
        padding: 0;
        margin: 0;
      }
      .wrap {
        overflow: visible;
        height: auto;
      }
      .table {
        background: gray;
        list-style: none;
        display: table;
        width: 100%;
        height: inherit;
      }
      .left {
        background: green;
        display: table-cell;
        height: inherit;
      }
      .right {
        background: blue;
        display: table-cell;
        width: 300px;
        height: inherit;
      }
      .sidebar {
        background: red; 
        height: 100%; /* not working */
        margin: 0;
      }
      </style>
  </head>

  <body>
    <div class="wrap">
      <ul class="table">
        <li class="left">
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>more...</p>
        </li>
        <li class="right">
          <div class="sidebar">
            <p>link</p>
            <p>link</p>
            <p>link</p>
            <p>link</p>
            <p>link</p>
            <p>more..</p>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

http://jsfiddle.net/cJpb6/

4

2 に答える 2

1

最初は、オブジェクトが 100% を認識していない場合、高さ 100% は何もしません。100% は親に依存します。そのため、この特定のケースでは、それをテーブル、.wrap、body、および html に追加する必要があります。

html, body {
     height:100%;
}

.wrap {
    overflow: visible;
    height: 100%;
}

.table {
    background: gray;
    list-style: none;
    display: table;
    width: 100%;
    height:100%;
}

.table li {
      height:100%;
      display:table-cell;
}

Jsfiddle: http://jsfiddle.net/YKqB8/

于 2013-05-23T04:07:02.683 に答える
1

あなたが使用していて、 auto に設定されてheight: inherit;いる a の高さを継承しているので、 を使用すると、何の 100% ですか? 親要素をに設定する必要がありますが、サイドバーが青いスペースを占めるようにしたいので、親に固定の高さを割り当てる必要がありますdivheight: 100%;height100%div

.right {
    background: blue;
    display: table-cell;
    width: 300px;
    height: 330px;
 }
.sidebar {
    background: red; 
    height: 100%;
    margin: 0;
}

デモ

コンテナがページ全体を占めるようにする場合は、すべてのコンテナの高さを 100% にする必要があるため、この方法でサイドバーは親要素の 100% の高さの 100% になります。

html, body {
    height: 100%;
}

.wrap {
    overflow: visible;
    height: 300px;
    height: 100%;
}

デモ

于 2013-05-23T04:09:31.417 に答える