Question

当“菜单”+“内容”的内容达到“包装”高度时，仅使用CSS是否可以让“内容”div滚动？

“菜单”是动态的，可以有1个，2个或3个链接，这会影响“内容”div的左上空间和它的高度，然后才会出现滚动。

我知道我可以将max-height设置为“content”div，但由于我不知道“菜单”的高度，我无法弄清楚如何解决这个问题。

如果我确实知道“菜单”高度，这将是一个非百分比值，我仍然有问题从“内容”高度计算它的高度，因为它是百分比。

HTML:

<div class='wrap'>
    <div class='menu'>
        <a href=''>Contact us</a><br />
        <a href=''>Contact information</a>
    </div>
    <div class='content'>
        <b>Contact us</b><br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
    </div>
</div>

CSS:

.wrap {
    width: 80%;
    height: 80%;
    position: absolute;
    background-color: #ccc;
}
.content {
    overflow: auto;
    height: auto;
    max-height: 100%;  /* ?? */
}

Answer 1

我最终想出了一个回答另一个问题的方法，部分需要类似的东西，而且flex版本需要IE8的后备版本（但是我花了几个月的时间才算出来:)）。

此样本也有“粘性页脚”，并且都没有固定的高度。

html,
body { height: 100%; margin: 0 }

.container {
  display: table;
  width: 100%;
  height: 100%;
}
.page-row {
  display: table-row;
  height: 0;
}
.page-row-expanded {
  height: 100%;
}

main .content {
  height: 100%;
  overflow: auto;
}

.header, .footer {
  background-color: #bbb;
  padding: 10px;
}

<div class="container">
        
        <header class="page-row">
          <div class="header">
            <a href=''>Contact us</a><br />
            <a href=''>Contact information</a><br />
          </div>
        </header>
                
        <main class="page-row page-row-expanded">
            <div class="content">
              <b>Contact us</b><br />
              1. Bla bla bla<br />
              2. Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
              Bla bla bla<br />
            </div>
        </main>

        <footer class="page-row">
          <div class="footer">
            <a href=''>Copyright etc.</a><br />
            <a href=''>Sitemap etc.</a><br />
            <a href=''>Social etc.</a><br />
          </div>
        </footer>

    </div>

Answer 2

我担心唯一的方法是明确地说明/猜测菜单的高度（或最大高度），并使用position：fixed和top：0px

使其在页面上浮动

示例：http://jsfiddle.net/92rhj/6/

<div class='wrap'>
    <div class='menu'>
        <a href=''>Contact us</a><br />
        <a href=''>Contact information</a>
    </div>
    <div class='content'>
        <b>Contact us</b><br />
        1. Bla bla bla<br />
        2. Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
        Bla bla bla<br />
    </div>
</div>

-

.menu, .content {
    width: 100%;
}
.menu {
    position: fixed;
    top: 0;
    background-color: green;
}
.content {
    background-color: red;
    margin-top: 50px;
}

当达到父div高度时，滚动子div中的内容

2 个答案: