Comment créer une balise de plongée scrollable verticalement?

Je veux créer une balise div défilable avec une hauteur fixe qui obtient une barre de défilement verticale. J'essaie de faire fonctionner ça en chrome.Comment créer une balise de plongée scrollable verticalement?

Ceci est mon CSS:

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

il montre la barre de défilement vertical, mais le problème est au cours de la période de temps lorsque l'utilisateur ajoute un contenu à la #designDiv. Il ne défile pas et le #designDiv commence à se développer verticalement. Comment créer une balise div défilante verticalement pour le chrome?

Source

2010-02-19 NOVIA

Eh bien, votre code a fonctionné pour moi (en cours d'exécution 5.0.307.9 Chrome et Firefox 3.5.8 sur Ubuntu 9.10), mais je suis passé

overflow-y: scroll;

overflow-y: auto;

page de démonstration à: http://davidrhysthomas.co.uk/so/tableDiv.html.

xhtml ci-dessous:

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

Source

2010-02-19 15:08:47

Cela fonctionne également pour cordova! :RÉ – Quispie

Ajout de overflow:auto avant de définir overflow-y semble faire l'affaire dans Google Chrome.

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

Source

2010-02-19 12:43:49

Ce code crée une belle barre de défilement verticale pour moi dans Firefox et 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>

Voici une JS fiddle demo prouvant les travaux ci-dessus.

Source

2013-12-03 16:45:55

Comment créer une balise de plongée scrollable verticalement?

Répondre

Questions connexes