Jump to content
php.lv forumi

Kā lai īsti uzseto iekšējā div elementa augstumu uz 100%?


Cibiņš
 Share

Recommended Posts

Kā lai īsti uzseto iekšējā div elementa augstumu uz 100%????? Zinu kā ārējo elementu uzsetot cssaa lai ir 100%, bet kā lai šo augstumu uzseto iekšējam elementam? Piem es vēlos lai <div id="menu"> daļa aizpilda lapu no līdz pašam apakšējam headerim automātiski, un lapa ir smuki 100% ekrāna augstumā ja tajā nav teksta un būtu bez scrollera, bet ja teksts ir "Text" laukaa pietiekami tā lai var lapu scrolleet augstumaa, tad arī tas "menu" pastiepjas uz leju līdz footerim. Ceru ka ir saprotams.

 

lapa.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="dizains.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="layout">
<div id="headHat">
	<div id="header"></div>
		<div id="headerUp">
			<div id="lrrText"></div>
				<div id="headerPicture"></div>
		</div>
</div>
<div id="menu">
 <div id="menuUp"></div>
 Menu</div>
<div id="content">Textarea</div>
		<div id="buffer"></div>
			<div id="footer"></div>
</div>
</body>
</html>

 

dizains.css

 

* {
padding: 0;
margin: 0;			
}
html, body {
font-family: Arial, sans-serif;
height: 100%;
background-image: url(657423.png);
background-repeat: no-repeat;
background-position: left top;
}
#headHat {
background-image: url(0589454.png);
background-repeat: no-repeat;
background-position: left top;
height: 412px;
width: 100%;
}
#lrrText {
height: 173px;
width: 437px;
background-image: url(1564.png);
background-repeat: no-repeat;
background-position: center center;
float: left;
margin-top: 95px;
margin-left: 53px;
}
#headerUp {
background-image: url(8786453.png);
background-repeat: repeat-x;
background-position: left center;
height: 369px;
width: 100%;
}
#headerPicture {
background-image: url(8797465.png);
background-repeat: no-repeat;
background-position: center center;
height: 309px;
width: 401px;
float: right;
margin-top: 11px;
margin-right: 40px;
}
#layout {
min-height: 100%;
height: 100%;
background: transparent url(fake.png) repeat-y top right;
position: relative;
}
#layout[id] {
height: auto;
}
#content {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 290px;
height: auto;
}
#header {
height: 43px;
background-image: url(02324165.png);
background-repeat: repeat-x;
background-position: left top;
margin-top: -1px;
}
#buffer {
height: 0px;
clear: both;
}
#footer {
position: absolute;
height: 45px;
width: 100%;
bottom: -1px;
background-image: url(78946.png);
background-repeat: repeat-x;
background-position: center center;
background-color: #666;
}

#menu {
width: 290px;
float: left;
background-image: url(321.png);
height: 100%;
background-repeat: repeat-y;
background-position: left top;
background-color: #009;
}
#menuUp {
position:absolute;
width:290px;
height:45px;
z-index:1;
background-image: url(123.png);
background-repeat: no-repeat;
background-position: left bottom;
top: 367px;
}
.other {
float: right;
}
p {
color:#999;
padding:20px;
font-size:11px;
}

Edited by Cibiņš
Link to comment
Share on other sites

A kam tev šito?

 

#menuUp position:absolute;

 

Iesaku, paņem kādu gatavu css layout un apskaties struktūru. Ja godīgi, domu nesapratu.

Link to comment
Share on other sites

Kas tu gribi lai tevi ar karoti baro ?

 

:D Protams nee..bet nau saprotams, kur ir taas peleekaas joslas parametri cssaa..pietam tur ir tāda lieta kā div main, kura paramatri NE cssaa, NE htmlaa NAV norādīti. Plus vienkārši nokopējot visu lapu gan saglabājot, gan arī kopējot skriptu un palaižot uz localhosta vai pārkopējot uz servera, atstājot viņu tādu kāds viņš ir tajā tur lapā kuru devi, neko nemainiot, tā pelēkā josla kreisajā malā nezkapēc mistiski pazūd.

Edited by Cibiņš
Link to comment
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...
 Share

×
×
  • Create New...