html - 灵活的绝对元素高度

Question

我在绝对 div 高度方面遇到了一些问题。

描述:

1. .wrapper - 我希望包装器为自动高度但受最大高度限制。 ( wrapper 没有滚动条)

2. .title - 只是一个标题

3. .content - 这是问题开始的地方。我希望内容 div 垂直滚动(Y)。但是如果我不给 wrapper 一个高度，我就不能让它滚动。但我不希望包装器具有固定高度。

这是一个jsfiddle以下:

.wrapper {
  position: absolute;
  width: 50%;
  max-height: 70%;
  background-color: green;
}
.title {
  height: 50px;
  text-align: center;
  background-color: red;
}
.content {
  height: 100%;
  width: 100%;
  background-color: blue;
  overflow-y: auto;
}

<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />Content
    <br />
  </div>
</div>

Answer 1

这是您要找的吗？ http://jsfiddle.net/mdb5dzxL/3/

注意html,body上的height:100%

<div class="wrapper">
  <div class="title">
    Title
  </div>
  <div class="content">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
  </div>
</div>

<style type="text/css">
html,body {
  height:100%;
  margin:0;
  width:100%;
}

.wrapper{
  position: relative;
  width: 50%;
  height:100%;
  max-height:70%;
  background-color: green;
}

.title{
  height: 50px;
  text-align: center;
  background-color: red;
}
.content{
  height: 100%;
  width: 100%;
  background-color: blue;
  overflow-y: auto;
  position:relative;
}
</style>

编辑:我刚刚重新阅读了这个问题，并意识到这并不能完全回答它。最初的要求是在 .wrapper 上有一个“自动”高度，但上面例子中的高度总是 70%。这是一个可行的解决方案，前提是您愿意使用 CSS3(IE8 及以下版本不支持):http://jsfiddle.net/mdb5dzxL/4/

<style type="text/css">
html,body {
  height:100%;
  margin:0;
  width:100%;
}

.wrapper{
    background: none repeat scroll 0% 0% #008000;
    max-height: calc(70% - 50px);
    width: 50%;
    overflow-y: auto;
    position: absolute;
    margin-top: 50px;
}

.title{
    height: 50px;
    text-align: center;
    background-color: red;
    margin-top:-50px;
    position:fixed;
    width:50%;
}

.content{
    background-color: blue;
}
</style>