Jump to content

A centered div that has 100% height but also expands with content


Recommended Posts

I'm trying to have a centered <div> that always goes top to bottom, but as content is added it expands with the content. Thanks! Here's what I have so far.

<!DOCTYPE HTML><html><head><title>My Site</title><style type="text/css">* {padding: 0;margin: 0;}html, body {height: 100%;}body {background-color: #999;}.container {position: relative;width: 1000px;height: 100%;margin-left: auto;margin-right: auto;background-color: #fff;}</style></head><body><div class="container"><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1></div></body></html>

Link to post
Share on other sites
<!DOCTYPE HTML><html><head><title>My Site</title><script type="text/javascript">function showhide(){var header1 = document.getElementsByTagName("h1");header1[12].style.display=="none" ? show=1 : show=0;for (i=0;i<header1.length;i++)  {  if(show)   {   header1[i].style.display="block";   }  else   {   if(i>=12)    {    header1[i].style.display="none";    }   }}}</script><style type="text/css">* {padding: 0;margin: 0;}html, body {height: 100%;}html{overflow-y:scroll;}body {background-color: #999;}.container {position: relative;width: 1000px;min-height: 100%;margin-left: auto;margin-right: auto;background-color: #fff;}</style></head><body><div class="container"><h1>TESTING TOP <a href="javascript:void(0)" onclick="showhide()">click me</a></h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING END</h1></div></body></html>

Link to post
Share on other sites
try margin: 0 auto; without a height.
Actually - it worked as far as filling in behind the content, but it's still not stretching to the extent of the window for pages with little content. Adding a height of 100% does the trick, but then on pages with tons of content it stops about 1/3 way down the page. margin-bottom: 0 works well on big content pages.
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Talent</title><link rel="stylesheet" type="text/css" href="includes/stylesheet.css"><script src="includes/scripts.js"></script></head><body><div class="container"><div class="logo"></div><div class="navigation">	<ul>    	<li><a href="castings.php">castings</a></li>    	<li><a href="talent.php">talent</a></li>    	<li class="submenu"><a href="talent.php?category=1">infants/toddlers</a></li>    	<li class="submenu"><a href="talent.php?category=2">pre-teens</a></li>    	<li class="submenu"><a href="talent.php?category=3">females<span>teen</span></a></li>    	<li class="submenu"><a href="talent.php?category=4">males<span>teen</span></a></li>    	<li class="submenu"><a href="talent.php?category=5">females<span>adult</span></a></li>    	<li class="submenu"><a href="talent.php?category=6">males<span>adult</span></a></li>    	<li><a href="products.php">products</a></li>    	<li><a href="about-us.php">about us</a></li>    	<li><a href="contact-us.php">contact us</a></li>    </ul></div>    <div class="content">        <div class="talent-name">Products</div>		<div class="talent-name-border"></div><br />		Coming soon!    </div></div></body></html>

The CSS.

* {padding: 0;margin: 0;}html, body {height: 100%;}table {border-collapse: collapse;}body {background-color: #fff;cursor: default;font-family: 'Arial', 'sans-serif';color: #303030;font-size: 13px;background-image: url('../images/bg.jpg');}a {text-decoration: none;color: #a35112;}a:hover {cursor: pointer;color: #cca347;} /* embed fonts */@font-face {font-family: 'Century Gothic';src: url('gothic.ttf') format('truetype');}@font-face {font-family: 'Arial Narrow';src: url('arialn.ttf') format('truetype');}@font-face {font-family: 'Arial Narrow Bold';src: url('arialnb.ttf') format('truetype');} /* logo */.logo {/*float: left;*/position: absolute;top: 0px;left: 0px;width: 223px;height: 223px;background-image: url('../images/logo.png');background-repeat: no-repeat;z-index: 2;} /* navigation */.navigation {left: 30px;top: 214px;position: absolute;width: 146px;color: #fff;font-family: 'Century Gothic', 'Verdana', 'sans-serif';font-size: 14px;z-index: 1;}.navigation ul {list-style: none;}.navigation li {height: 30px;background-color: #666;margin-bottom: 1px;}.navigation a {color: #fff;display: block;padding-top: 5px;padding-left: 9px;width: 100%;height: 100%;}.navigation a:hover {color: #ccc;}.navigation li.submenu {background-color: #333;}.navigation li.submenu a {padding-left: 18px;}.navigation span {margin-left: 6px;color: #999;} /* container */.container {position: relative;width: 1000px;margin-top: 0;margin-bottom: 0;margin-left: auto;margin-right: auto;background-color: #fff;z-index: 0;padding-right: 10px;padding-bottom: 20px;} /* content */.content {padding-left: 220px;padding-top: 20px;width: 777px;} /* category */.category-boxes {list-style-type: none;}.category-boxes a {display: block;width: 100%;height: 100%;}.category-boxes a span {margin-left: 5px;color: #ccc;}.category-boxes li {position: relative;display: inline;float: left;margin-right: 20px;margin-bottom: 20px;width: 155px;height: 155px;border: 1px solid #000;background-repeat: no-repeat;}.category-boxes li div {position: absolute;color: #fff;font-family: 'Arial Narrow Bold', 'Arial', 'sans-serif';background-image: url('../images/35percent.png');font-size: 16px;text-transform: uppercase;text-align: center;top: 133px;width: 155px;height: 19px;padding-top: 3px;} /* talent */.talent-boxes {list-style-type: none;}.talent-boxes a {display: block;width: 100%;height: 100%;}.talent-boxes a span {display: block;color: #ccc;}.talent-boxes li {display: inline;float: left;margin-right: 20px;margin-bottom: 20px;width: 155px;height: 155px;border: 1px solid #000;background-repeat: no-repeat;text-align: center;}.talent-boxes li div {color: #fff;font-family: 'Arial Narrow Bold', 'Arial', 'sans-serif';font-size: 18px;text-transform: uppercase;background-image: url('../images/35percent.png');background-repeat: repeat;height: 29px;padding-top: 6px;text-align: center;position: relative;top: 120px;}.talent-name {color: #bfbfbf;font-family: 'Arial Narrow', 'Arial', 'sans-serif';text-transform: uppercase;font-size: 48px;margin-bottom: 8px;}.talent-name span {color: #d5d5d5;}.talent-name-border {position: absolute;top: 80px;left: 200px;right: 10px;border-bottom: 3px solid #d4692a;z-index: -1;}.talent-stats {font-family: 'Arial Narrow', 'Arial', 'sans-serif';text-transform: uppercase;font-size: 12px;color: #333;width: 400px;padding-left: 2px;padding-top: 5px;}.talent-stats ul {list-style-type: none;}.talent-stats li {float: left;display: inline;}.talent-stats div {width: 100px;float: left;}.talent-stats .stat {color: #7f7f7f;width: 72px;}.talent-photos {clear: both;text-align: center;}.talent-photos img {border: 2px solid #ccc;}.talent-photos-buttons {padding-top: 75px;text-align: center;clear: both;}.talent-photos-buttons img {margin-right: 2px;}.talent-photos-buttons img:hover {cursor: pointer;}.talent-page-buttons {text-align: center;margin-right: 87px;}.talent-page-buttons img {margin-right: 2px;}.talent-page-buttons img:hover {cursor: pointer;}.talent-fb {float: right;} /* form */form table {width: 700px;margin-left: auto;margin-right: auto;}form .option {font-weight: bold;width: 110px;height: 30px;}form .option span {color: #d4692a;}form input[type='text'], form input[type='submit'], form textarea {width: 98%;}form textarea {height: 60px;}form .message {text-align: center;padding: 3px;border: 1px solid #93cf96;background-color: #e3ffe5;} /* castings */.casting-container {height: 800px;overflow: auto;margin-top: 20px;color: #000;}.casting-title {color: #d4692a;font-size: 18px;font-weight: bold;}.casting-date {color: #878787;margin-bottom: 5px;}.casting-description {margin-bottom: 20px;} .sub-border {border-bottom: 3px solid #d4692a;}

Link to post
Share on other sites

If you use height:100%; it stick to the height of the viewport screen area, if use min-height: 100%; as my posting, its will never be lower than the viewport screen, AND will extend to height within it, unless these child elements use position: absolute; where this styling will cause it to become invisible to the parent container, where it will ignore this element and shrink down to content it can see UNLESS this content is less than viewport screen. If you tried my example where i included javascript to show content beyond viewport screen area, and above you would see this working.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...