Stretching DIV height

Question

louie540 0 Newbie Poster

12 Years Ago

Ok well I have a DIV menu bar that I want to stretch 100% in height. It worked perfectly fine until I added the XHTML doctype. So I tried absolute positioning which worked but then my other divs started overlapping them.

So I want to know if there is any javascript code to make my menu bar stretch vertically. The name of the div I want to stretch is the class "sidemenu".

CSS

html {
	height: 100%;

}

body {
	min-height: 100%;	
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	background: #000;
	margin: 0;
	padding: 0;
	color: #CCC;

}
.container {
	width: 100%;
	background-color: #0c0c0c;
	background-image: url();
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;
	position: absolute;
	margin-left: auto;
	margin-right: auto;

}
.content {
	background-color: #222;
	padding: 5px;
	position: relative;
	width: 1000px;
	min-height: 500px;
	margin-left: auto;
	margin-right: auto;
			
}
.sidemenu {
	background-color: #111;
	padding: 5px;
	width: 250px;
	height: 100%;
	position: relative;
	float: right;
	margin-right: -5px;
	margin-top: -5px;
	
}
.footer {
	padding: 5px;
	height: 210px;
	background-image: url(../Images/footerbackground.gif);
	background-repeat: no-repeat;
	background-color: #0c0c0c;
	position: relative;
	width: 960px;
	margin-left: auto;
	margin-right: auto;

}
.headerleft {
	background:url(../Images/header-left.png) no-repeat left top;
	height: 209px;
	
}
.header {
	background:url(../Images/header-middle.gif) repeat-x left top;
	height: 209px;
	max-width:1920px;
	min-width: 960px;
	background-color: #073444;
	
}
.headerright {
	background:url(../Images/header-right.png) no-repeat right top;
	height: 209px;
	z-index: -999;

}

.menu {
	position: absolute;
	margin-top: -35px;
	width: 1024px;
	margin-left: 10px;

}

#content2 {
	min-width: 610px;
	max-width: 940px;
	position: relative;	

}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Metal Gear Planet</title>

<link rel="stylesheet" type="text/css" href="sheets/style.css"/>
<link rel="stylesheet" type="text/css" href="sheets/navcss.css"/>

</head>


<body>
		<div class="header"><div class="headerleft"><div class="headerright"></div></div></div>	
		
		<div class="menu">
			<ul id="nav">
				<li><a href="../index.php">Home</a></li>
				<li><a href="../news/">News</a></li>
				<li><a href="#">Walkthroughs</a>
							<ul>
								<li><a href="../walkthroughs/mgs1/intro.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/intro.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/intro.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/intro.html">Metal Gear Solid 4</a></li>
							</ul>
				</li>
				<li><a href="#">Videos</a>
							<ul>
								<li><a href="../walkthroughs/mgs1/more/video.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/more/video.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/more/video.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/more/video.html">Metal Gear Solid 4</a></li>
							</ul>
				</li>
				<li><a href="#">Hints</a>
							<ul>
								<li><a href="../walkthroughs/mgs1/more/hints.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/more/hints.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/more/hints.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/more/hints.html">Metal Gear Solid 4</a></li>
							</ul>
				</li>
				<li><a href="../downloads/">Downloads</a></li>
				<li><a href="../downloads/">Affiliates</a></li>
			</ul>
		</div>
<div class="container">		

	<div class="content">
	 		              
    <div class="sidemenu">
	    <p>Content</p>
	</div>
            
			<div id="content2">
				<h1>What the shit!</h1>
				<p>JHlasdklj asdjlksafjskld sfjl;asd asdjl; asdjkalsd asjdl;smdas sadljas dadjl asdkj</p>
				<p>Welcome to the Metal Gear Solid 3 Walkthrough. Note that the choice of difficulty for this Walkthrough is based on Normal which could be the difference in quantity of items, an enemy’s vision, how much life you have, quantity of enemy’s in an area, and how much damage you can tolerate.</p>
                				
			</div>
</div>

	<div class="footer"><p>Hi</p></div>

</div>

</body>
</html>

javascript

Edited 12 Years Ago by louie540 because: n/a

4 Contributors
11 Replies
207 Views
2 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by Troy III

All 11 Replies

Agarsia 0 Junior Poster

12 Years Ago

use

function getHeight() { //function to geht the Clients window Height
 if(window.innerHeight) {
  return window.innerHeight;
 } else if (document.body && document.body.offsetHeight) {
   return document.body.offsetHeight;
 } else { 
  return 0; 
 }
}

document.getElementById('yourdiv').style.height = getHeight();

-Agarsia

Troy III 272 Posting Pro

12 Years Ago

Just don't specify its height.

[and why do you need to use that godamn xhtml when working on HTML?!!]

Troy III 272 Posting Pro

12 Years Ago

That's because xhtml is not HTML.

Use <!DOCTYPE html> instead. The working group on xhtml is discontinued. They've dropped it completely.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

louie540 0 Newbie Poster · Answer 1 · 2011-10-21T23:52:28+00:00

louie540 0 Newbie Poster

12 Years Ago

It didn't work :(

louie540 0 Newbie Poster · Answer 2 · 2011-10-24T01:37:10+00:00

Just don't specify its height.

I guess I'll try that. Thanks.

[and why do you need to use that godamn xhtml when working on HTML?!!]

Why not?

louie540 0 Newbie Poster · Answer 3 · 2011-10-24T14:36:01+00:00

Well your method seemed very promising (seeing as though doing 4.01 strict wouldn't let me do it so easily) but it still didn't work. But I had an idea to move it over by using the content width - the sidemenu width and then margin it left with whatever x equaled which was 710px. I switched it back to absolute so I can make it 100% again, and margin-left 710px; and it work even when I resize my browser window.

Thanks for trying to help though. I think I just needed a break.

Troy III 272 Posting Pro · Answer 4 · 2011-11-03T17:11:53+00:00

Sorry, when I said "its" I meant [or at least I was thinkging] the height of the wrapping div.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2011-11-04T14:49:40+00:00

The working group on xhtml is discontinued. They've dropped it completely.

This needs to be qualified Troy.

"The working group on xhtml is discontinued" - True. The W3C XHTML working group's charter lapsed in 2010.

"They've dropped it completely" - False. The reason that the XHTML working group's charter was allowed to lapse is that XHTML is now encompassed by the HTML working group. If anything, this makes XHTML more authoritative and here-to-stay, not less.

Under current W3C Working Draft and WHATWG Living Standard, HTML and XHTML are alternative "concrete syntaxes", both of which, according to the standards, conform to the same "in-memory representation" standard known as "DOM HTML" or "DOM" for short. The standards also allow for other "concrete syntaxes".

In both W3C and WHATWG documentation (each is a variant of the other, and the two working groups "work together"), "The HTML syntax" and "The XHTML syntax" are adjacent chapters:

Chapters 8 and 9 in http://www.w3.org/TR/html5/.
Chapters 13 and 14 in http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents.

For whatever reason, you may not like XHTML, but please don't start false rumours of its demise.

XHTML is alive and kicking.

Of course, if you can point to something that indicates otherwise, I will be pleased to read it.

Best wishes, as always

Airshow

Troy III 272 Posting Pro · Answer 6 · 2011-11-07T20:11:02+00:00

This needs to be qualified Troy.
"The working group on xhtml is discontinued" - True. The W3C XHTML working group's charter lapsed in 2010.
"They've dropped it completely" - False. The reason that the XHTML working group's charter was allowed to lapse is that XHTML is now encompassed by the HTML working group. If anything, this makes XHTML more authoritative and here-to-stay, not less.
Under current W3C Working Draft and WHATWG Living Standard, HTML and XHTML are alternative "concrete syntaxes", both of which, according to the standards, conform to the same "in-memory representation" standard known as "DOM HTML" or "DOM" for short. The standards also allow for other "concrete syntaxes".
In both W3C and WHATWG documentation (each is a variant of the other, and the two working groups "work together"), "The HTML syntax" and "The XHTML syntax" are adjacent chapters:
Chapters 8 and 9 in http://www.w3.org/TR/html5/.

Chapters 13 and 14 in http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents.

For whatever reason, you may not like XHTML, but please don't start false rumours of its demise.
XHTML is alive and kicking.
Of course, if you can point to something that indicates otherwise, I will be pleased to read it.
Best wishes, as always
Airshow

No. It's dead.
Plain dead, -not 'gone to heavens'; not 'they're with god now'; not 'they've passed..(into another world)" which are nothing but classical examples of euphemism of the direct notion.

No, the
"working group on xhtml is discontinued" means: they're gone; They are, no more!

It doesn't have to do with any kind of "liking" or "disliking" tasty or not; xhtml is simply Wrong. W3C was wrong for a decade.
xhtml is a fatal misunderstanding of the web and one of the gravest errors in its history.

Call it "Dog ate Dolly" if you like, -when a company is merged under another, the previous doesn't exist, because thankfully Dolly is a verbal cutie for Chimera, or a went wrong experiment.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 7 · 2011-11-08T04:07:12+00:00

Troy,

High on humour but no hyperlinks to anything authoritative.

For now, I will stick with my version of the truth based on the documentation I have read.

I like XHTML by the way, but I also like "Dog ate Dolly".

Airshow

Troy III 272 Posting Pro · Answer 8 · 2011-11-08T05:24:32+00:00

Well, the denial phase sometimes lasts longer than anticipated.
In practice xhtml never existed.

Stretching DIV height

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers