Wie erstellt man einen scrollbaren Div Tag vertikal?

Ich möchte ein scrollbares div-Tag mit einer festen Höhe erstellen, das eine vertikale Bildlaufleiste erhält. Ich versuche, das in Chrome zu machen.Wie erstellt man einen scrollbaren Div Tag vertikal?

Das ist mein CSS:

#designDiv 
{ 
    width:249px; 
    height:299px; 
    background-color:Gray; 
    overflow-y: scroll; 
    max-width:230px; 
    max-height:100px; 
}

Es hat die vertikale Bildlaufleiste anzeigen, aber das Problem ist während der Laufzeit, wenn der Benutzer einige Inhalte der #designDiv hinzufügt. Es scrollt nicht und die #designDiv beginnt vertikal zu erweitern.

Wie erstelle ich ein scrollbares div tag vertikal für chrome?

Quelle

2010-02-19 NOVIA

Nun, Ihr Code für mich gearbeitet (mit Chrome 5.0.307.9 und Firefox 3.5.8 auf Ubuntu 9.10), obwohl ich

geschaltet

overflow-y: scroll;

overflow-y: auto;

Demo Seite vorbei an: http://davidrhysthomas.co.uk/so/tableDiv.html.

xhtml unter:

<!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" lang="en"> 

<head> 
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

    <title>Div in table</title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> 

     <style type="text/css" media="all"> 

     th  {border-bottom: 2px solid #ccc; } 

     th,td  {padding: 0.5em 1em; 
       margin: 0; 
       border-collapse: collapse; 
       } 

     tr td:first-child 
       {border-right: 2px solid #ccc; } 

     td > div {width: 249px; 
       height: 299px; 
       background-color:Gray; 
       overflow-y: auto; 
       max-width:230px; 
       max-height:100px; 
       } 
     </style> 

    <script type="text/javascript" src="js/jquery.js"></script> 

    <script type="text/javascript"> 

    </script> 

</head> 

<body> 

<div> 

    <table> 

     <thead> 
      <tr><th>This is column one</th><th>This is column two</th><th>This is column three</th> 
     </thead> 



     <tbody> 
      <tr><td>This is row one</td><td>data point 2.1</td><td>data point 3.1</td> 
      <tr><td>This is row two</td><td>data point 2.2</td><td>data point 3.2</td> 
      <tr><td>This is row three</td><td>data point 2.3</td><td>data point 3.3</td> 
      <tr><td>This is row four</td><td><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies mattis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum a accumsan purus. Vivamus semper tempus nisi et convallis. Aliquam pretium rutrum lacus sed auctor. Phasellus viverra elit vel neque lacinia ut dictum mauris aliquet. Etiam elementum iaculis lectus, laoreet tempor ligula aliquet non. Mauris ornare adipiscing feugiat. Vivamus condimentum luctus tortor venenatis fermentum. Maecenas eu risus nec leo vehicula mattis. In nisi nibh, fermentum vitae tincidunt non, mattis eu metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel est purus. Ut accumsan, elit non lacinia porta, nibh magna pretium ligula, sed iaculis metus tortor aliquam urna. Duis commodo tincidunt aliquam. Maecenas in augue ut ligula sodales elementum quis vitae risus. Vivamus mollis blandit magna, eu fringilla velit auctor sed.</p></div></td><td>data point 3.4</td> 
      <tr><td>This is row five</td><td>data point 2.5</td><td>data point 3.5</td> 
      <tr><td>This is row six</td><td>data point 2.6</td><td>data point 3.6</td> 
      <tr><td>This is row seven</td><td>data point 2.7</td><td>data point 3.7</td> 
     </body> 



    </table> 

</div> 

</body> 

</html>

Quelle

2010-02-19 15:08:47

Dies funktioniert auch für Cordova! : D – Quispie

Hinzufügen overflow:auto vor der Einstellung overflow-y scheint den Trick in Google Chrome zu tun.

{ 
    width:249px; 
    height:299px; 
    background-color:Gray; 
    overflow: auto; 
    overflow-y: scroll; 
    max-width:230px; 
    max-height:100px; 
}

Quelle

2010-02-19 12:43:49

Dieser Code erstellt eine schöne vertikale Bildlaufleiste für mich in Firefox und Chrome:

CSS:

#answerform{ 
    position: absolute; 
    border: 5px solid gray; 
    padding: 5px; 
    background: white; 
    width: 300px; 
    height: 400px; 
    overflow-y: scroll; 
}

HTML:

<div id='answerform'> 
    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> 
    mushroom<br><br>mushroom<br><br> 
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> 
</div>

Hier ist ein JS fiddle demo die oben genannten Arbeiten beweisen.

Quelle

2013-12-03 16:45:55

Wie erstellt man einen scrollbaren Div Tag vertikal?

Antwort

Verwandte Themen