HTML/CSS/Box Model/height — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
м (1 версия)
 
(нет различий)

Текущая версия на 08:16, 26 мая 2010

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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/height&oldid=5283»