CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Setting a minimum height for a div


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 4th, 2013, 12:22 PM
foreverforever foreverforever is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2010
Posts: 44 foreverforever User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 58 m 15 sec
Reputation Power: 4
Setting a minimum height for a div
Apologies if this is incredibly basic but it's defeating my brain so I'm asking for help ;

My page is divided up into header, content, and footer.

Header is at the top of the page as you'd expect, content follows, and then the footer, locked to the bottom of the page unless it is pushed down by the content div. All as you'd expect.

Equally unexpectedly, the content div is padded, has rounded corners, and box shadow - indicating that it's where the page's real information is presented.

I want the content div to extend from just below the header to just above the footer even if the content div presents little or no information, and that is where I'm having difficulty.

If I set the content div's position as "absolute", it doesn't push the footer down the page when there is an abundance of content in the content div.

If I set the content div's position as "relative", it only extends down as far as required to present the information, and that could be a really small distance when only a small amount of information is presented, rather than to just above the footer as I'd like.

Could some please tell me what I can do to present the content div as I wish ?

Code for absolute:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<style>

/* CSS Document */

@media screen, projection {
 
.BeNiceToMacIE5 {
font-family: "\"}\"";
font-family: inherit;
}

html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color:#224597/*#200772*/;
min-height: 100%;
overflow-y: scroll;
overflow-x: auto;
}

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100%;
}

#wrapper, wrapper2 {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
}

html>body, html>body #wrapper, html>body #wrapper2 {
height: auto;
}
 
div#wrapper {
    position: absolute;
    top: 0px;
    width: 96%;
    right:2%;
    left: 2%;
    background-image:url(../images/framework/wrapper01.gif);
    background-repeat:repeat;
    border-left: 1px solid #93A1CC;
    border-right: 1px solid #93A1CC;    
}
 
#header {
    height:154px;
    padding-top:15px;
    padding-right:30px;
    padding-bottom:0;
    padding-left:30px;
    background-color:#6C8CD5;
    position:relative;
}
 
#content01 { /* NB - ABSOLUTE */
    position:absolute;
    top:200px;
    right:30px;
    bottom:110px;
    left:30px;
    padding-top:0;
    padding-right:20px;
    padding-bottom:0;
    padding-left:20px;
    background-color: #ffffff;
    border: 2px solid #93A1CC;
    border-radius:8px;
    -moz-box-shadow: 3px 3px 5px 0px #93A1CC;
    -webkit-box-shadow: 3px 3px 5px 0px #93A1CC;
    box-shadow: 3px 3px 5px 0px #93A1CC;
}
 
.clear {
clear: both;
margin: 0;
padding: 0;
}
 
#footer {
clear: both;
bottom: 0px;
left: 0;
width: 100%;
height: 78px;
background:#6C8CD5/*#A1C4E8*/;
border-top: 1px solid #93A1CC;
color: #fef9ee;
overflow:hidden;
}
#footerContent {padding:10px;}
#footerContent h5 {margin:0; padding:5px 0; color: #fef9ee;}
#footerContent p {padding:5px 0; margin:0;}
 
#main {
margin: 0;
padding: 0;
}
/* \*/
* html #footer {
position: absolute;
}
* html #main {
padding-bottom: 100px;
}
/* \*/
head:first-child+body div#footer {
position: absolute;
z-index:0;
}
head:first-child+body div#main {
padding-bottom: 100px;
}
 
}
 
@media all and (min-width:0px) {
head~body {height:100%;}
}

</style>

</head>
 
<body>

<!-- wrapper begin -->
<div id="wrapper">
        
    <div id="header">
    
        <div id="headercontent">
        HEADER
        </div><!-- id="headercontent" -->
    
    </div><!-- header ends -->
 
    <!-- main begin -->
    <div id="main">
    
        <div id="content01"><!-- content01 begin -->
        
        <p>    
        CONTENT :
        
        <br /><br />
        
        Rellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
        
        </p>
        
        </div><!-- content01 end -->
        
        <!-- clear begin -->
        <div class="clear">
        </div>
        <!-- clear end -->
            
    </div>
    <!-- main end -->
 
    <!-- footer begin-->
    <div id="footer">    
    
        <!-- footerContent begin -->
        <div id="footerContent">
        
            FOOTER
        
        </div>
        <!-- footerContent end -->
                
    </div>
    <!-- footer end -->
 
</div>
<!-- wrapper end -->

</body>

</html> 


Code for relative:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<style>

/* CSS Document */

@media screen, projection {
 
.BeNiceToMacIE5 {
font-family: "\"}\"";
font-family: inherit;
}

html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color:#224597/*#200772*/;
min-height: 100%;
overflow-y: scroll;
overflow-x: auto;
}

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100%;
}

#wrapper, wrapper2 {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
}

html>body, html>body #wrapper, html>body #wrapper2 {
height: auto;
}
 
div#wrapper {
    position: absolute;
    top: 0px;
    width: 96%;
    right:2%;
    left: 2%;
    background-image:url(../images/framework/wrapper01.gif);
    background-repeat:repeat;
    border-left: 1px solid #93A1CC;
    border-right: 1px solid #93A1CC;    
}
 
#header {
    height:154px;
    padding-top:15px;
    padding-right:30px;
    padding-bottom:0;
    padding-left:30px;
    background-color:#6C8CD5;
    position:relative;
}
 
#content01 { /* NB - RELATIVE */
    position:relative;
    top:30px;
    margin-right:30px;
    margin-bottom:40px;
    margin-left:30px;
    padding-top:0;
    padding-right:20px;
    padding-bottom:20px;
    padding-left:20px;
    background-color: #ffffff;
    border: 2px solid #93A1CC;
    border-radius:8px;
    -moz-box-shadow: 3px 3px 5px 0px #93A1CC;
    -webkit-box-shadow: 3px 3px 5px 0px #93A1CC;
    box-shadow: 3px 3px 5px 0px #93A1CC;
}
 
.clear {
clear: both;
margin: 0;
padding: 0;
}
 
#footer {
clear: both;
bottom: 0px;
left: 0;
width: 100%;
height: 78px;
background:#6C8CD5/*#A1C4E8*/;
border-top: 1px solid #93A1CC;
color: #fef9ee;
overflow:hidden;
}
#footerContent {padding:10px;}
#footerContent h5 {margin:0; padding:5px 0; color: #fef9ee;}
#footerContent p {padding:5px 0; margin:0;}
 
#main {
margin: 0;
padding: 0;
}
/* \*/
* html #footer {
position: absolute;
}
* html #main {
padding-bottom: 100px;
}
/* \*/
head:first-child+body div#footer {
position: absolute;
z-index:0;
}
head:first-child+body div#main {
padding-bottom: 100px;
}
 
}
 
@media all and (min-width:0px) {
head~body {height:100%;}
}

</style>

</head>
 
<body>

<!-- wrapper begin -->
<div id="wrapper">
        
    <div id="header">
    
        <div id="headercontent">
        HEADER
        </div><!-- id="headercontent" -->
    
    </div><!-- header ends -->
 
    <!-- main begin -->
    <div id="main">
    
        <div id="content01"><!-- content01 begin -->
        
        <p>    
        CONTENT :
        
        <br /><br />
        
        Rellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
        
        </p>
        
        </div><!-- content01 end -->
        
        <!-- clear begin -->
        <div class="clear">
        </div>
        <!-- clear end -->
            
    </div>
    <!-- main end -->
 
    <!-- footer begin-->
    <div id="footer">    
    
        <!-- footerContent begin -->
        <div id="footerContent">
        
            FOOTER
        
        </div>
        <!-- footerContent end -->
                
    </div>
    <!-- footer end -->
 
</div>
<!-- wrapper end -->

</body>

</html> 
Last edited by foreverforever : February 10th, 2013 at 04:42 AM.
Reply With Quote
  #2  
Old February 4th, 2013, 05:59 PM
richpri's Avatar
richpri richpri is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Location: Chicago
Posts: 51 richpri User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 h 43 m 32 sec
Reputation Power: 1
Facebook
I did something similar to what you are trying
to do. The trick that I used was to resize two
of the three fixed divisions whenever the page
size changed.

This is the CSS code:

Code:
html, body {
  margin: 0;
  padding: 0;
}

#topofpage {
  background-color:#ffeedd;
  position:fixed;
  left:0px;
  top:0px;
  height:90px;
  width:100%;
  z-index:5;
}

#leftofpage {
  background-color:#ddffdd;
  position:fixed;
  overflow-y:scroll;
  left:0px;
  top:90px;
  width:135px;
  height:400px;
}

#rightofpage {
  background-color:#ffeedd;
  position:fixed;
  overflow-y:scroll;
  overflow-x:scroll;
  left:135px;
  height:400px;
  top:90px;
}


And this is the js/jquery code:

Code:
/* Function setPage() adjusts the height and width
 * of rightofpage and the height of lefttofpage.
 */
function setPage()
{
  var winH = $(window).height();
  var winW = $(window).width();
  $('#rightofpage').css('height', winH-90);
  $('#rightofpage').css('width', winW-135);
  $('#leftofpage').css('height', winH-90);
}


/* Function resize() waits for 200 ms before
 * executing setPage. Multiple window resize  
 * events that occur within this time peroid 
 * will only trigger the setPage function once.
 */  
$(window).resize(function() 
{
  if(this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() 
  {
    $(this).trigger('resizeEnd');
  }, 200);
});
$(window).bind('resizeEnd', function() {
  setPage();
});

/* Initial page resizing. */
$(function(){
  setPage();  
});
Comments on this post
foreverforever agrees!
Reply With Quote
  #3  
Old February 5th, 2013, 06:38 AM
foreverforever foreverforever is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2010
Posts: 44 foreverforever User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 58 m 15 sec
Reputation Power: 4
Thanks richpri but I don't think that this is what I need. The problem isn't the size of the window but adjusting the content div to best display the content, whether there's a lot of content or very little. Some users of my site will upload a lot of content, whereas others may upload very little, and I want the layout to look good either way.

Or have I missed the point ? Quite possible as I seem to be really stumbling here.

Quote:
Originally Posted by richpri
I did something similar to what you are trying
to do. The trick that I used was to resize two
of the three fixed divisions whenever the page
size changed.
Reply With Quote
  #4  
Old February 5th, 2013, 07:29 AM
richpri's Avatar
richpri richpri is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Location: Chicago
Posts: 51 richpri User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 h 43 m 32 sec
Reputation Power: 1
Facebook
Lets talk about my setup's content division which sits inside of the rightofpage division.

When there is a lot of stuff in the content division, it scrolls within the rightofpage division which seems to me just a good as scrolling within the browser window. (Better in fact because the header stays in place.)

When there is very little stuff in in the content division, it is smaller but since the background-color is specified for the the rightofpage division the viewer cannot see this. It looks like it still fills the whole screen (except for the header and the sidebar in leftofpage).

I don't use a footer, but you cold put one in a static bottomofpage division and it too would stay on the screen when the content division scrolled. Of course you would have to adjust the formulas in setPage().

If you had a 90px header like I do and added a 40px footer then the winH-90 term would have to be changed to winH-130.

Hope this helps!
Reply With Quote
  #5  
Old February 5th, 2013, 08:24 AM
foreverforever foreverforever is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2010
Posts: 44 foreverforever User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 58 m 15 sec
Reputation Power: 4
Hi richpri,

Isn't that essentially the same as setting overflow-y to scroll in my content div in the "absolute" example ?

I appreciate that you want your header to stay in place, but I want the whole page to scroll rather than just the content div.

If needs be, I could go down the scrolling overflow-y road but it wouldn't be my ideal solution. Any other ideas ?
Reply With Quote
  #6  
Old February 5th, 2013, 09:08 AM
richpri's Avatar
richpri richpri is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Location: Chicago
Posts: 51 richpri User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 h 43 m 32 sec
Reputation Power: 1
Facebook
Sorry, nothing else occurs to me.
Reply With Quote
  #7  
Old February 5th, 2013, 11:10 AM
foreverforever foreverforever is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2010
Posts: 44 foreverforever User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 58 m 15 sec
Reputation Power: 4
OK, well thanks all the same - hopefully someone else will come up with what I need.

Quote:
Originally Posted by richpri
Sorry, nothing else occurs to me.
Reply With Quote
  #8  
Old February 5th, 2013, 03:03 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,893 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 2 Days 18 h 35 m 4 sec
Reputation Power: 4192
foreverforever, there is no good way to do what you're trying to do. You could try using "display:table" (for #wrapper), "display:table-row" (for #header, #main, #footer), and "display:table-cell" (for #headercontent, #content01, #footerContent). Since you already have separate wrapper <div>s for the header and footer, you may not need to add any additional markup.

Out of curiosity, is there a particular reason why your code has IE5/Mac hacks in it? When was the last time you tested in IE5/Mac?

Quote:
Originally Posted by richpri
(Better in fact because the header stays in place.)

And worse because when someone scrolls via the page up/down keys or by clicking in the scrollbar's gutter, the page will scroll by the viewport's height but the top of that will be covered by the fixed-positioned header.
__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).
Reply With Quote
  #9  
Old February 7th, 2013, 08:24 AM
foreverforever foreverforever is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2010
Posts: 44 foreverforever User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 58 m 15 sec
Reputation Power: 4
Quote:
Originally Posted by Kravvitz
foreverforever, there is no good way to do what you're trying to do.
It may not be perfect but I have what seems to be a working solution :

This is what I've done :

1 - Set the content div (#content01) as position:relative;

2 - Added a one-cell table within the content div, and given it a class of "contentbox".
Code:
<table class="contentbox"><tr><td valign="top">
CONTENT :
		
<br /><br />
				
Rellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, 
ultricies eget, tempor sit amet, ante. 
		
</td></tr></table>
3 - Shifted some css from "content01" to "contentbox", so it now looks like this -
Code:
#content01 { /* NB - RELATIVE */
	position:relative;
	top:30px;
	margin-right:30px;
	margin-bottom:40px;
	margin-left:30px;
}
 
.contentbox {
	width:100%;
	height:300px;
	padding-top:20px;
	padding-right:20px;
	padding-bottom:20px;
	padding-left:20px;
	background-color: #ffffff;
	border: 2px solid #93A1CC;
	border-radius:8px;
	-moz-box-shadow: 3px 3px 5px 0px #93A1CC;
	-webkit-box-shadow: 3px 3px 5px 0px #93A1CC;
	box-shadow: 3px 3px 5px 0px #93A1CC;
}
4 - Moved all content into the table.

5 - Modified richpri's jQuery code to adjust all elements with a class of "contentbox" - ie the new table.
Code:
$('.contentbox').css('height', winH-320);
I appreciate that using a table in this way does run slightly counter to the concept of css but it seems to work. Would appreciate hearing if there's any reason why I shouldn't do it this way.

Quote:
Originally Posted by Kravvitz
Out of curiosity, is there a particular reason why your code has IE5/Mac hacks in it? When was the last time you tested in IE5/Mac?
To be honest, it's a template that I found on the web - I don't actually understand the IE5/Mac hacks - once I have a better grip of design, I hope to tidy it up.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Setting a minimum height for a div

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap