DIV with child DIVs and how to manage the height/width

I have a DIV that’s the container for some other DIVs. It’s width and height are great but when I add another DIV with a height set the content in the container DIV is pushed beyond the boundaries of the container.

How can I get the container to keep a set width and height while filling it with DIVs so content doesn’t get pushed outside the boundaries?

I’m currently building all of this using Javascript so here’s the code…

var container = document.createElement("div");
document.body.appendChild(container);
container.style.border = "1px solid #555";
container.style.height = "90%";
container.style.width = "90%";
container.style.marginLeft = "auto";
container.style.marginRight = "auto";

var bar = document.createElement("div");
container.appendChild(bar);
bar.style.height = "35px";
bar.style.backgroundColor = "#f00";

var titlebar = document.createElement("div");
bar.appendChild(titlebar);
titlebar.style.height = "100%";
titlebar.style.backgroundColor = "#ccc";
titlebar.innerHTML = title;

var content = document.createElement("div");
container.appendChild(content);
content.style.height = "100%";
content.style.backgroundColor = "#f00";

var status = document.createElement("div");
container.appendChild(status);
status.style.height = "50px";
status.style.backgroundColor = "#ccc";

Would you mind posting some html/css?
It would greatly increase your chances of a good answer.

NokX,

You will need to create a “working page” of HTML and CSS that demonstrates the issue you are talking about. A “working page” is one that starts with <!doctype html>, contains a complete <head> section with CSS and JS or links to those files, ends with </html> and can run as a standalone page and demonstrate the issue. That way, we can see exactly what you see.

Hi there NokX,

I’m in a very good mood, so I’m not going to ask you why are doing this. :sunglasses:

Instead I will just type this…

   container.style.overflow='auto';

coothead

Here’s a quick HTML page I threw together. You can see how “content” and “statusbar” are being pushed out of “container”. I’m guessing something needs to change about “content” height but I’m not sure.

<!doctype html>
<html>
<head>
<title>Example</title>
<style type="text/css">
html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
#container {
	position: fixed;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	border: 1px solid #555;
}
#titlebar {
	height: 35px;
	padding: 2px;
	background-color: #f00;
}
#content {
	height: 100%;
	background-color: #0f0;
}
#statusbar {
	height: 50px;
	padding: 2px;
	background-color: #00f;
}
</style>
</head>
<body>
<div id="container">
	<div id="titlebar">Testing</div>
    <div id="content"></div>
    <div id="statusbar"></div>
</div>
</body>
</html>

Assuming you want unlimited content inside a fixed height container then as coothead suggests above you need to add overflow:auto to it.

#container {
	position: fixed;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	border: 1px solid #555;
	overflow:auto;
}

Note that height:100% is generally not what you want as that means the element will never be able to grow more than the 100% you set and that 100% will be dependent of the parent having a fixed height.100% also means 100% of the parent and so if the parent has other content then all elements will add up to greater than 100%.

It is unclear whether you want overflowing content or whether you want a top, middle and bottom to all fit nicely in that fixed positioned wrapper? Of course you will still need to cater for overflow should your content exceed the height of that fixed wrapper.

Without a full understanding of the dynamics of this page its hard to give a suitable answer :slight_smile:

2 Likes

I’m not wanting unlimited content, I just want the content DIV to fill the space between the titlebar and the statusbar.

And what dimensions might that space be?

We are presuming that your page will adjust to fit most devices (RWD). If you assign fixed widths and/or heights (a limited area for content), some devices will be excluded, ie: content will be lost.

Either write the page with a sticky footer or a normal footer (as I posted below), or with the ability to spawn scrollbars as needed (as coothead and Paul posted).

<!doctype html>
<html>
<head>
<title>Example</title>
<style type="text/css">
html, body {
    padding:0;
    margin:0;
}
#container {
    border:1px solid #555;
}
#titlebar {
    height:35px;
    padding:2px;
    background-color:#faa;
}
#content {
    background-color:#afa;
    overflow:hidden;
}
#statusbar {
    height:50px;
    padding:2px;
    background-color:#aaf;
}
</style>
</head>
<body>
<div id="container">
    <div id="titlebar">Testing</div>
    <div id="content">
        <p>This is content.</p>
        <p>This is content.</p>
        <p>This is content.</p>
        <p>This is content.</p>
        <p>This is content.</p>
        <p>This is content.</p>
    </div>
    <div id="statusbar"></div>
</div>
</body>
</html>

The dimensions between titlebar and statusbar (where content resides) can vary, depending on how the window is resized. titlebar and statusbar are fixed heights, content needs to be flexible.

The DIVs inside of content adjust to the size of content with no overflow needed.

container fills most of the window with a 20px margin, titlebar is fixed at the top, content should be flexible, and statusbar is fixed at the bottom.

Thanks for the tips. Trying to explain as best I can.

As Ron suggests a sticky footer approach may do.

<!doctype html>
<html>
<head>
<title>Example</title>
<style type="text/css">
html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
#container {
	position: fixed;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	border: 1px solid #555;
	overflow:hidden;
}
#titlebar {
	height: 35px;
	padding: 2px;
	background-color: #f00;
}
#content {
	background-color: #0f0;
}
#statusbar {
	height: 50px;
	padding: 2px;
	background-color: #00f;
}
.wrap {
	display:table;
	width:100%;
	height:100%;
}
.row {
	display:table-row;
}
</style>
</head>
<body>
<div id="container">
  <div class="wrap">
    <div class="row" id="titlebar">Titlebar</div>
    <div class="row" id="content">Content</div>
    <div class="row" id="statusbar">Footer</div>
  </div>
</div>
</body>
</html>

Of course if you have more content in the center than you have viewport then the scrollbars will kick in on the fixed wrapper.

You did not describe the maximum dimensions and area that you expect the content to fill. That’s key. Because if the content exceeds those dimensions or that area, then the content will need to trigger scrollbar or be lost. If the content amounts to a resizable image - one that you plan to scale to fit the viewport - then no problem; but if it is text, yes, possible problem which your descriptions have not illuminated.

This is Paul’s latest post with the sticky footer. I added some text content.

<!doctype html>
<html>
<head>
<title>Example=Paul2</title>
<style type="text/css">
html, body {
    height:100%;
    padding:0;
    margin:0;
}
#container {
    position:fixed;
    top:20px;
    left:20px;
    right:20px;
    bottom:20px;
    border:1px solid #555;
    overflow:auto;
}
#titlebar {
    height:35px;
    padding:2px;
    background-color:#faa;
}
#content {
    background-color:#afa;
}
#statusbar {
    height:50px;
    padding:2px;
    background-color:#aaf;
}
.wrap {
    display:table;
    width:100%;
    height:100%;
}
.row {
    display:table-row;
}
</style>
</head>
<body>
<div id="container">
    <div class="wrap">
        <div class="row" id="titlebar">
            <p>Title Bar</p>
        </div>
        <div class="row" id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>
            <p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>
            <p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>
            <p>Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>
        </div>
        <div class="row" id="statusbar">
            <p>Status Bar</p>
        </div>
    </div>
</div>
</body>
</html>

In an earlier post I mentioned that I’m not wanting unlimited content and that overflow will not be needed. The content DIV will simply have 3 other DIVs inside of it that will be whatever height the content is.

Thanks for the feedback! I’ll give each suggestion a try.

Are you saying that the three containers inside the .content div will be contained within the boundaries of .content and will be iframes or otherwise capable of themselves triggering scroll bars if needed?

Perhaps you can turn @Paul’s or my working page into a working example showing more clearly how your page will work. :slight_smile:

Do you mean that you won’t actually be having any real content as such (text etc.) but perhaps an image or images that resize to the available space?

If you have real content such as text then you won’t be able to squash it into a set height container unless you have an amount of text that is always less than the available space and that users have not zoomed etc.

You can see why we are labouring this point as usually we deal with actual content but if perhaps you are just making a diagram or want three images scaled to fit then that’s a different matter entirely.:slight_smile:

Notwithstanding the above the code we have offered will accomplish what you have asked for and assuming you don’t have any overflow it will not matter either way.

The DIVs that are inside of the Content DIV will have overflow, but Content itself doesn’t need overflow.

I’ve got it figured out! I forgot about using table, table-row, table-column, table-cell, etc… and seeing your all’s posts of that reminded me.

Thanks!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.