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 height sets the height of the element.
- 7 height: size an element by assigning pixels, ems, a percentage
- 8 Percentages are more flexible because they can scale to the viewport.
- 9 width: 100% and height: 100%
- 10 width: 200px and height: auto
- 11 width: auto and height: 200px
- 12 width, height: percentage
height:100% stretches an element to the height of its parent.
<!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>
height: 150px
<!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>
Height and overflow
<!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>
height:auto is the default
<!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>
height sets the height of an element"s inner box.
<!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>
height sets the height of the element.
<!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>
height: size an element by assigning pixels, ems, a percentage
<!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>
Percentages are more flexible because they can scale to the viewport.
<!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>
width: 100% and height: 100%
<!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>
width: 200px and height: auto
<!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>
width: auto and height: 200px
<!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>
width, height: percentage
<!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>