Html 弹性绝对元件高度

我对绝对高度有点问题

说明：

.wrapper

-我希望包装为自动高度，但限制为最大高度。（包装器无滚动条）

.title

-只是一个标题

.content

-问题从这里开始。我希望内容div垂直滚动（Y）。但是如果我不给包装纸一个高度，我就不能让它滚动。但我不希望包装纸的高度固定

以下是其中一项：

.wrapper{
位置：绝对位置；
宽度：50%；
最大高度：70%；
背景颜色：绿色；
}
.头衔{
高度：50px；
文本对齐：居中；
背景色：红色；
}
.内容{
身高：100%；
宽度：100%；
背景颜色：蓝色；
溢出y：自动；
}

标题
内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

这就是你要找的吗

注意高度：在html上为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>

标题
内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

html，正文{
身高：100%；
保证金：0；
宽度：100%；
}
.包装纸{
位置：相对位置；
宽度：50%；
身高：100%；
最大高度：70%；
背景颜色：绿色；
}
.头衔{
高度：50px；
文本对齐：居中；
背景色：红色；
}
.内容{
身高：100%；
宽度：100%；
背景颜色：蓝色；
溢出y：自动；
位置：相对位置；
}

编辑：我只是重新阅读了这个问题，并意识到这并不能完全回答它。最初的请求是在.wrapper上有一个“自动”高度，但上面示例中的高度始终为70%。如果您愿意使用CSS3（IE8及以下版本不支持），这里有一个可行的解决方案：

html，正文{
身高：100%；
保证金：0；
宽度：100%；
}
.包装纸{
背景：无重复滚动0%0%#008000；
最大高度：计算（70%-50px）；
宽度：50%；
溢出y：自动；
位置：绝对位置；
边缘顶部：50px；
}
.头衔{
高度：50px；
文本对齐：居中；
背景色：红色；
利润上限：-50px；
位置：固定；
宽度：50%；
}
.内容{
背景颜色：蓝色；
}

试试这个

html{
身高：100%；
}
身体{
最小高度：100%；
}
.包装纸{
位置：绝对位置；
宽度：50%；
身高：70%；
背景颜色：绿色；
}
.头衔{
高度：50px；
文本对齐：居中；
背景色：红色；
}
.内容{
身高：100%；
宽度：100%；
背景颜色：蓝色；
溢出y：自动；
}

你把html和正文CSS忘在一边了。你好，这就是我要找的。calc是否可以跨浏览器工作？@TugsuuGanbat-

calc（）

具有合理的支持，包括IE9+-。如果需要，还可以使用javascript回退。

<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>