HTML/CSS/CSS Attributes and Javascript Style Properties/overflow

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

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

 
<!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>
  <div class="ex1"> 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. 
  </div> 
</body>
</html>



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

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



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

 
<!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>
  <div class="ex1"> 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. 
  </div> 
</body>
</html>



overflow: auto

 
<!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<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>
        </body>
    </html>



"overflow" Example

    
<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">
<div id="results" style="color:red">overflow is set to auto.</div>
<br>
<input id=myButton type=button value="Set overflow to scroll" onclick="function1();">
</body>
</html>



overflow: hidden

 
<!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<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>
        </body>
    </html>



overflow: scroll

 
<!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<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>
        </body>
    </html>



scroll clips the overflowing content and provides scrollbars

 
<!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>
  <div class="ex1"> 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. 
  </div> 
</body>
</html>



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

 
<!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>
  <div class="ex1"> 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. 
  </div> 
</body>
</html>



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

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



You can set overflow to one of four constant values: visible, hidden, scroll, or 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">
<head>
<title></title>
<style type="text/css">
* .ex1 {
  overflow: visible;
  width: 100px;
  height: 30px;
  background: yellow;
  
}
</style>
</head>
<body>
  <div class="ex1"> 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. 
  </div> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/overflow&oldid=4857»