CODEWITHSUNDEEP
htmlcss
Muuski
Muuski

Reputation: 208

Fitting div height to fixed parent

I have a window that is fixed to the bottom left of the browser window. Inside the window is a title bar that should remain at the top of the window and some content that sometimes is longer than the window can allow. I am attempting to add scrollbars to the content, but the content overflows the window and gets clipped off without creating scrollbars.

It's possible to add scrollbars to #WindowConsole but that makes the #WindowTitleBar scroll as well.

How do I make the #WindowContent div fit the parent space of the #WindowConsole and let it's content overflow with scrollbars?

JSFiddle

CSS

#WindowConsole {
    position: fixed;
    bottom: 0;
    left: 1;
    min-width: 10%;
    max-width: 27.4%;
    max-height: 50%;
}

#WindowContent {
    padding: 0px;
    overflow-y: scroll;
}

HTML

<div id="WindowConsole">
    <div id="WindowTitleBar">
        <span id="WindowTitle">Window</span>
        <a id="WindowMinimizeButton" href="">_</a>
    </div>
    <div id="WindowContent">
        Really long content
    </div>
</div>

Upvotes: 2

Views: 58

Answers (3)

Sean
Sean

Reputation: 337

I think you want the content area to size responsively, so you need to either have a fixed titlebar height, so that you know the size of the content area, or you can use flexbox.

#WindowConsole {
    display: flex;
    flex-direction: column;
}

https://jsfiddle.net/zx2mcxuq/1/

Upvotes: 2

Alex Brandsen
Alex Brandsen

Reputation: 1

This should do it: https://jsfiddle.net/vgnfq98L/

#WindowContent {
  padding: 0px;
  overflow-y: scroll;
  height:300px;
  padding-top:20px;
  position:relative;
  z-index:1;
}

#WindowTitleBar {
  width: 100%;
  height:auto;
  background: #E6E6E6;
  text-align:center; 
  display: inline-block;
  position:absolute;
  top:0;
  z-index:2;

  border-bottom: 1px solid #000000;
}

Make the top bar position absolute, give the content window padding at the top so it doesn't slide under the top bar. Then give the content a set height so it can scroll.

Upvotes: 0

Frits
Frits

Reputation: 7614

You've done everything right in your JSFiddle example, the only problem here is that you need to have some form of fixed height on #WindowContent.

In this case, I used max-height like this:

#WindowContent {
    max-height: 200px;
}

This would allow it to have a breaking point of 200px before the scrollbars kick in. Here is an updated working fiddle

Upvotes: 2

Related Questions