CSS Codes
CSS Layouts
Results 1 to 8 of 8

Thread: height not 100%

  1. 10-25-2012, 01:51 AM #1
    mlegg's Avatar
    mlegg
    mlegg is offline Senior Coders
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default height not 100%

    This is a new template I am working on and temp. located at http://eppingland.com/
    That is the only real page, all the other menus are linking to a copy of the home page.

    CSS is at http://eppingland.com/BruStyles.css

    Code:
    body {
  margin: auto;
   background : url("images/beer-bg.jpg");
  background-repeat : repeat;
  max-width : 960px;
  height:100%;
}
#mainPicture {
  height : 200px;
  width : 960px;
  background : url("images/Bruburger-logo.jpg") no-repeat;
  padding-top: 0;
  margin: 0;
}

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#E79600;
	background-repeat:repeat;
	border-color:#cccccc #111111 #111111 #cccccc;
	border-width:1px;
	border-style:solid;
}
ul.pureCssMenu {
        width:766px;
        padding-left:190px;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:196.35px;
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#E79600;
	border-width:1px;
	border-color:#C21C02;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:2px 5px 2px 10px;
	_padding-left:0;
	font:16px Georgia;
	color: #C21C02;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3px;
	height:100%;
	display:inline-block;
	background-color:#cccccc #111111 #111111 #cccccc;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3px;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#C21C02;
	border-color:#E79600;
	border-style:solid;
	font:16px Georgia;
	color: #FFFFFF;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#C21C02;
	border-color:#E79600;
	border-style:solid;
	font:16px Georgia;
	color: #FFFFFF;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #666 !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arr_white.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:12px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white.gif);
}
ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_white.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}


div.one {  
      padding: 10px;  
      height:100%;
} 

.contentBox {
  color:#C21C02;
  font-family: Georgia, "Times New Roman", Times, serif; 
  font-size: 16px;
  clear:both;
  height:100%;
}

.innerBox {
  color:#C21C02;
  font-family: Georgia, "Times New Roman", Times, serif; 
  font-size: 16px;
  background-color : #ffffff;
  background-image : url("images/content_back.png");
  background-repeat : repeat-y;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom : 1em;
  height:100%;
}
.innerBox a:link  { 
color : #FF0000;
text-decoration:underline;
}
.innerBox a:visited {
color: #FF0000;
text-decoration : underline; 
}

.innerBox a:hover  {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

.innerBox a:active  {
color : #FF0033; 
background-color: #FFFFFF;
text-decoration: underline;
}

.columns
{
    width:100%;
}
.left
{
    float:left;
    width:620px;
    
}
.right
{
    margin-left:340px;
}
.clear
{
    clear:both;
}
.columns-b
{
    width:100%;
}
.left-b
{
    float:left;
    width:500px;
    
}
.right-b
{
    margin-left:450px;
}
.clear
{
    clear:both;
}
#h1 { 
 text-shadow:black 0.5em 0.5em 0.5em;   
 text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 18px; 
    font-weight: bold; 
    color: #FFFFFF; 
    display: block;
 } 
#h2 { 
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 16px; 
    color: #FFFFFF; 
    display: block;
 } 
#h3 { 
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 12px; 
    color: #FFFFFF; 
    display: block;
    padding: 6px; 
} 
#h4 { 
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 10px; 
    color: #FFFFFF; 
    display: block;
    padding: 6px; 
} 


#footer {
  background : url("images/footer.gif") no-repeat;
  height:35px;
  text-align : center;
  font-size : 16px;
  font-family : sans-serif;
  color : maroon;
  padding-top: 5px;
}
#footer a:link  { 
color : #7a0026;
text-decoration:underline;
}

#footer a:visited {
color: #7a0026;
text-decoration : underline; 
}

#footer a:hover  {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

#footer a:active  {
color : #7a0026; 
background-color: #FFFFFF;
text-decoration: underline;
}
    Do you want me to post the HTML?
    Reply With Quote Reply With Quote
  2. 10-25-2012, 03:43 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The height of what isn't 100% of what?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 10-25-2012, 04:01 AM #3
    ajfmrf's Avatar
    ajfmrf
    ajfmrf is offline Senior Coders
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default

    I made an adjustment to this code in the css file

    Code:
    .contentBox {
  color:#C21C02;
  font-family: Georgia, "Times New Roman", Times, serif; 
  font-size: 16px;
  clear:both;
  height:100%;
}
    to this

    Code:
    .contentBox {
  color:#C21C02;
  font-family: Georgia, "Times New Roman", Times, serif; 
  font-size: 16px;
  clear:both;
  height:400px;
}
    Is this what you are looking for?

    http://www.web-user.info/temp/epland.html
    Thanks,

    Bud
    Reply With Quote Reply With Quote
  4. 10-25-2012, 11:20 AM #4
    mlegg's Avatar
    mlegg
    mlegg is offline Senior Coders
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    oh, I'm sorry for not explaining better, I meant the where the pages' text content is

    yes I was looking to make the entire page height be full height, whatever the screen height of the viewer may be, so thought that height:100% would be proper
    Reply With Quote Reply With Quote
  5. 10-25-2012, 11:22 AM #5
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    What you really might want then is to leave that at 100% and set the html element's height to 100%.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  6. 10-25-2012, 12:35 PM #6
    mlegg's Avatar
    mlegg
    mlegg is offline Senior Coders
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    I added this to the CSS file

    Code:
    html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
    now the page is just a bit to long/high, although I will leave this for now because I am unsure of how much content my buddy has for each page

    thanks
    Reply With Quote Reply With Quote
  7. 10-25-2012, 04:50 PM #7
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    html width is natively 100%, by declaring it though it may distort the other dimension. I'd drop that part.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  8. 10-25-2012, 05:05 PM #8
    mlegg's Avatar
    mlegg
    mlegg is offline Senior Coders
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    OK thanks
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Auto adjust height for module tab based on biggest tab height with pure CSS
    By thangaman in forum CSS
    Replies: 0
    Last Post: 08-11-2009, 06:19 AM
  2. How to make a pop-up window that has the same height as the browser inner height
    By Burner in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-04-2007, 06:21 PM
  3. matching div height to dynamic Iframe height
    By Kevisazombie in forum JavaScript
    Replies: 1
    Last Post: 10-07-2007, 10:22 PM
  4. In IE6 the height of the P7 submenus are not adjusting to the height of the text
    By rubin in forum CSS
    Replies: 0
    Last Post: 08-06-2007, 06:12 AM
  5. Setting a division's height based on Screen Height.
    By xstayxstrongx in forum JavaScript
    Replies: 1
    Last Post: 01-27-2006, 04:15 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules