HTML/CSS/CSS Attributes and Javascript Style Properties/overflow — различия между версиями

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

Версия 12:20, 26 мая 2010

auto works like scroll except that it shows scrollbars only as needed

   <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">

  • .ex1 {
   overflow: auto;
 width: 100px;
 height: 30px;
 background: yellow;

} </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.

</body> </html> 

</source>


display:none does not render an element by completely removing it from all flows

   <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;
   width: 800px;
   height: 800px;
   background: pink;

}

  • .box {
 float: right;
 overflow: auto;
 visibility: visible;
 width: auto;
 height: 100px;
 margin: 10px;
 padding: 10px;
 background: red;

}

  • .small {
   display:none;
   padding-left: 10px;
   background: blue;

} </style> </head> <body>

this is a test.
this is a test. this is a test. this is a test.
this is a test

</body> </html> 

</source>


hidden hides the overflowing content and does not provide scrollbars, which prevents a user from scrolling overflowed content into view.

   <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">

  • .ex1 {
   overflow: hidden;
 width: 100px;
 height: 30px;
 background: yellow;

} </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.

</body> </html> 

</source>


overflow: 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>
       <head>
           <title></title>
           <style type="text/css">
       p {
           padding: 10px;
           margin: 10px;
           border: thin solid black;
           width: 150px;
           height: 150px;
           overflow: auto;
       }
           </style>
       </head>
       <body>

P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P

       </body>
   </html>
</source>


"overflow" Example

   <source lang="html4strict">

<html> <script language="JavaScript"> function function1(){ 

   if(myBody.style.overflow=="auto"){
      myBody.style.overflow="scroll";
      myButton.value="Set overflow to hidden.";
      results.innerText="overflow is set to scroll.";
      return false;
   }
   if (myBody.style.overflow=="scroll"){
      myBody.style.overflow="hidden";
      myButton.value="Set overflow to auto";
      results.innerText="overflow is set to hidden.";
      return false;
   }
   if(myBody.style.overflow=="hidden"){
      myBody.style.overflow="auto";
      myButton.value="Set overflow to scroll";
      results.innerText="overflow is set to auto.";
      return false;
   }

} </script> <body id="myBody" bottommargin="150" style="overflow:auto">

overflow is set to auto.


<input id=myButton type=button value="Set overflow to scroll" onclick="function1();"> </body> </html> 


     </source>


overflow: hidden

   <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 {
                   padding: 10px;
                   margin: 10px;
                   border: thin solid black;
                   width: 150px;
                   height: 150px;
                   overflow: hidden;
               }
           </style>
       </head>
       <body>

P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P

       </body>
   </html>
</source>


overflow: scroll

   <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 {
                   padding: 10px;
                   margin: 10px;
                   border: thin solid black;
                   width: 150px;
                   overflow: scroll;
               }
           </style>
       </head>
       <body>

P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P

       </body>
   </html>
</source>


scroll clips the overflowing content and provides scrollbars

   <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">

  • .ex1 {
   overflow: scroll;
 width: 100px;
 height: 30px;
 background: yellow;

} </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.

</body> </html> 

</source>


The default value is visible, which allows overflowing content to be rendered outside the containing block.

   <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">

  • .ex1 {
 width: 100px;
 height: 30px;
 background: yellow;

} </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.

</body> </html> 

</source>


visibility:hidden hides an element without affecting the other elements" inline flow.

   <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;
   width: 800px;
   height: 800px;
   background: pink;

}

  • .box {
 float: right;
 overflow: auto;
 visibility: visible;
 width: auto;
 height: 100px;
 margin: 10px;
 padding: 10px;
 background: red;

}

  • .small {
   visibility:hidden;
   position: absolute;
   padding-left: 10px;
   background: blue;

} </style> </head> <body>

this is a test.
this is a test. this is a test. this is a test.
this is a test

</body> </html> 

</source>


You can set overflow to one of four constant values: visible, hidden, scroll, or 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"> <head> <title></title> <style type="text/css">

  • .ex1 {
 overflow: visible;
 width: 100px;
 height: 30px;
 background: yellow;

} </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.

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/overflow&oldid=4856»