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

您正在使用height: inherit;并且您正在继承设置为 auto 的高度div，所以当您使用时height: 100%;，但是 100% 是什么？您需要将父元素设置height为，100%但由于您想让侧栏占据蓝色空间，您需要为父元素分配一个固定高度，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 回答