в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:44Z

1 версия

Новая страница

==height:100% stretches an element to the height of its parent.==



<source lang="html4strict">

<!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">
<head>
<title></title>
<style type="text/css">
.container{
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
float: left;
right: 200px;
height: 100%;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
</source>

==height: 150px==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
border: thin solid black;
text-align: justify;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<p>
This is a test. This is a test.
</p>
</body>
</html>
</source>

==Height and overflow==



<source lang="html4strict">

<!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" xml:lang="en">
<head>
<title>height</title>
<style rel="stylesheet" type="text/css">
div#wrapper {
border: 1px solid pink;
background: gold;
width: 130px;
}
div#box {
margin: 5px;
border: 5px solid red;
background: yellow;
padding: 5px;
height: 100px;
}
div#inner {
background: white;
text-align: justify;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box">
<div id="inner">
p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>
vp<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>
p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>
p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>p<BR/>
</div>
</div>
</div>
</body>
</html>
</source>

==height:auto is the default==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
border: thin solid black;
width: auto;
height: auto;
}
</style>
</head>
<body>
<p>
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test.
</p>
</body>
</html>
</source>

==height sets the height of an element"s inner box.==



<source lang="html4strict">

<!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">
<head>
<title></title>
<style type="text/css">
* .box {
display: static;
overflow: visible;
visibility: visible;
width: 160px;
height: 150px;
background-color: #ccc;
}
</style>
</head>
<body>

<h1>Box Model</h1>
<div class="box"></div>
</body>
</html>
</source>

==height sets the height of the element.==



<source lang="html4strict">

<!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">
<head>
<title></title>
<style type="text/css">
* .container {
position: relative;
background: black;
}
* .box {
position: absolute;
width: 300px;
left: auto;
right: 10px;
height: 100px;
background: red;
}
* .before {
z-index: 2;
width: 100px;
height: 400px;
left: 400px;
background: yellow;
}
</style>
</head>
<body>

<div class="container">
<div>BEFORE</div>
<div class="before">ABSOLUTE BEFORE</div>
<div class="box">this is a test. this is a test. </div>
</div>
</body>
</html>
</source>

==height: size an element by assigning pixels, ems, a percentage==



<source lang="html4strict">

<!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">
<head>
<title></title>
<style type="text/css">
.container{
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
float: left;
right: 200px;
height: 50%;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
</source>

==Percentages are more flexible because they can scale to the viewport.==



<source lang="html4strict">

<!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">
<head>
<title></title>
<style type="text/css">
.container{
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
float: left;
right: 200px;
height: 50%;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
</source>

==width: 100% and height: 100%==



<source lang="html4strict">

<!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" xml:lang="en">
<head>
<title>percentage measurement</title>
<style rel="stylesheet" type="text/css">
div {
font: 12px sans-serif;
border: 1px solid lightblue;
background: pink;
width: 100%;
height: 100%;
padding: 5px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum tellus orci, dignissim ut, consequat in, consectetuer
et, nibh. Donec luctus ante a neque convallis ultricies.
Curabitur ac lorem. Etiam adipiscing, nisi id eleifend feugiat,
dui lorem tempus lacus, at rutrum lectus ligula quis diam.
</div>
</body>
</html>
</source>

==width: 200px and height: auto==



<source lang="html4strict">

<!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" xml:lang="en">
<head>
<title>auto width and height</title>
<style rel="stylesheet" type="text/css">
img#x-aspect-1 {
border: 1px solid black;
margin: 5px;
width: 200px;
height: auto;
}
</style>
</head>
<body>
<div>
<img src="http://www.wbex.ru/style/logo.png" id="x-aspect-1" />
</div>
</body>
</html>
</source>

==width: auto and height: 200px==



<source lang="html4strict">

<!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" xml:lang="en">
<head>
<title>auto width and height</title>
<style rel="stylesheet" type="text/css">
img#y-aspect-1 {
border: 1px solid black;
margin: 5px;
width: auto;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="http://www.wbex.ru/style/logo.png" id="y-aspect-1" />
</div>
</body>
</html>
</source>

==width, height: percentage==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
width: 100%;
height: 100%;
margin: 10px;
padding: 10px;
border: 1px solid black;
background: lightgray;
}
</style>
</head>
<body>
<p>
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</p>
</body>
</html>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/Box Model/height - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия