CODEWITHSUNDEEP
htmlcss
Tugsuu Ganbat
Tugsuu Ganbat

Reputation: 61

Flexible absolute element height

I'm having a little problem with the absolute div height.

Description:

  1. .wrapper - I want the wrapper to be auto height but limited with max-height. (No scroll for wrapper)

  2. .title - Just a title

  3. .content - Here's where problem starts. I want the content div to be scrolled vertically(Y). But if I don't give a height to the wrapper I can't make it scroll. But I don't want the wrapper to be a fixed height.

Here is a jsfiddle of the below: 

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

Upvotes: 1

Views: 108

Answers (2)

Jonathan
Jonathan

Reputation: 6537

Is this what you're looking for? http://jsfiddle.net/mdb5dzxL/3/

Note the height:100% on the html,body

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

Edit: I just re-read the question and realised that this doesn't quite answer it. The original request was to have an "auto" height on the .wrapper, but the height in the above example will always be 70%. Here's a solution that could work, provided that you are willing to use CSS3 (not supported in IE8 and below): 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>

Upvotes: 1

Tony Pollard
Tony Pollard

Reputation: 54

Try this

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

Upvotes: 0

Related Questions