HTML/CSS/Box Model/height
Содержание
- 1 height:100% stretches an element to the height of its parent.
- 2 height: 150px
- 3 Height and overflow
- 4 height:auto is the default
- 5 height sets the height of an element"s inner box.
- 6 Box Model
- 6.1 height sets the height of the element.
- 6.2 height: size an element by assigning pixels, ems, a percentage
- 6.3 Percentages are more flexible because they can scale to the viewport.
- 6.4 width: 100% and height: 100%
- 6.5 width: 200px and height: auto
- 6.6 width: auto and height: 200px
- 6.7 width, height: percentage
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>
this is a test. this is a test. this is a test.
</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>
This is a test. This is a test.
</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>
p
p
p
p
p
p
p
p
p
p
vp
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
</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>
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.
</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>
Box Model
</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>
</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>
this is a test. this is a test. this is a test.
</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>
this is a test. this is a test. this is a test.
</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>
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.
</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>
<img src="http://www.wbex.ru/style/logo.png" id="x-aspect-1" />
</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>
<img src="http://www.wbex.ru/style/logo.png" id="y-aspect-1" />
</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>
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.
</body> </html> </source>
