Question

我的绝对div高度有点问题。

描述：

.wrapper - 我希望包装器为自动高度但受限于max-height。（没有滚动包装）
.title - 只是一个标题
.content - 这就是问题的起点。我希望内容div垂直滚动（Y）。但是，如果我没有给包装纸高度，我就无法滚动它。但我不希望包装器成为固定的高度。

以下是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上的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>

Answer 2

试试这个

＆＃13;

html{
  height: 100%;
}
body {
  min-height: 100%;
}
.wrapper{
    position: absolute;
    width: 50%;
    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;
}

＆＃13;

灵活的绝对元件高度

2 个答案: