Jump to content

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

kid_epicurus

By kid_epicurus
in CSS

 Share

Recommended Posts

kid_epicurus Newbie

kid_epicurus

Posted
Posted

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 comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 
<!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 comment
Share on other sites
kid_epicurus Newbie

kid_epicurus

Posted
  • Author
Posted
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 comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...