Div côte à côte avec une largeur variée Div scrollable

Je veux avoir deux div côte à côte avec le gauche fixe et le droit remplissant le reste de l'écran. Cependant, lorsque la droite div contient du contenu qui dépasse sa largeur disponible, la div de droite ne devrait pas tomber en dessous de la Div gauche mais devenir défilable. Autrement dit, les deux divisions restent côte à côte et la droite Div possède une barre de défilement.Div côte à côte avec une largeur variée Div scrollable

Définir une largeur% sur le div de droite affiche ce que je veux mais la droite Div ne remplit jamais l'espace restant, c'est comme si vous deviez définir la bonne largeur Div à 100% - leftDiv.width ...

Voici ce que j'ai.

Merci

<style type="text/css"> 
#leftDiv{ 
    width: 200px; 
    float: left; 
} 

#rightDiv{ 
    float: left; 
    overflow: auto; 
    /* width: 50%; */ 
} 
</style> 

<div id="leftDiv"> 
    Left side bar 
</div> 
<div id="rightDiv"> 
    Some_really_long_content_which_should_make_this_Div_scroll 
</div>

EDIT

je peux obtenir l'effet que je suis après avec quelques jQuery comme ça, mais je préfère une seule solution css.

$(window).bind('resize', function() { 
    $('#rightDiv').width($(this).width() - 220); 

});

Source

2010-01-15 Simon Hutton

Wow, c'est un dur. La plupart des sites ont une largeur fixe pour éviter de tels problèmes.

Je crois que ce qui suit est ce que vous voulez. Je l'ai testé dans firefox, ie, et safari. Vous aurez à jouer avec la hauteur pour obtenir ce parfait pour, par exemple.

Remarque: Je ne suis pas sûr de savoir comment cela fonctionnera pour d'autres doctypes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>foo</title> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
</head> 
<body> 

<style type="text/css"> 
    * { 
     border:none; 
     margin:0; 
     padding:0; 
    } 

    #leftDiv { 
     float: left; 
     width: 200px; 
     background-color:lightgreen; 
     position:absolute; 
     top:0px; 
     left:0px; 
    } 
    #rightDiv { 
     width:100%; 
     background-color:lightblue; 
    } 
    #padder { 
     padding-left:200px; 
    } 
    #content { 
     width:100%; 
     height:100px; 
     background-color:lightyellow; 
     overflow:auto; 
    } 
</style> 

<div id="leftDiv"> 
     Left side bar 
</div> 
<div id="rightDiv"> 
    <div id="padder"> 
     <div id="content"> 
      right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_ 
     </div> 
    </div> 
</div> 

</body> 
</html>

Source

2010-01-15 16:46:04 tybro0103

vous pouvez vous débarrasser de float: gauche à gaucheDiv btw – tybro0103

Excellent, merci beaucoup. Je pensais qu'il aurait besoin de quelques Divs imbriqués, mais c'était aussi loin que je l'ai eu! –

Voir une démo sur http://jsfiddle.net/r9G6s/ – opsb

-1

Vous devez donner un #rightDivmargin-left: 200px et width: 100%.

Source

2010-01-15 15:35:19

Merci, mais ne fonctionne pas tout à fait. Je reçois une barre de défilement dans la fenêtre principale du navigateur, je pense que 'rightDiv' est 100% + 200px large. –

Aucun droit ne serait que de 100% - 200px. –

Les marges sont toujours ajoutées à la largeur, et non soustraites. Il y a un moyen de contourner ça avec css3, mais tous les navigateurs ne supportent pas css3. – tybro0103

-1

Quelque chose comme ça?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <head> 
    <style type="text/css"> 

    * { border:none; margin:0; padding:0;} 

    #leftDiv{ 
     float: left; 
     width: 200px; 
     background-color:yellow; 
    } 

    #rightDiv{ 
     position:absolute; 
     left:200px; 
     float: left; 
     overflow: auto; 
     /* width: 50%; */ 
     background-color:green; 
     /*margin-left:202px;*/ 
     /*width:100%;*/ 
    } 
    </style> 
    </head> 
    <body> 
    <div id="leftDiv"> 
     Left side bar 
    </div> 
    <div id="rightDiv"> 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
     Some_really_long_content_which_should_make_this_Div_scroll 
    </div> 
    </body>

Source

2010-01-15 16:20:31 Edelcom

Cela place la barre de défilement sur la fenêtre plutôt que sur la droite div. – tybro0103

Ce qui a du sens, non? Hs affiche quelque chose de très incassable, pourquoi l'utilisateur ne pourrait-il pas le voir? Je pensais que votre question était juste que le bon div ne devrait pas être affiché sous la gauche. – Edelcom

Ah oui, j'ai mal lu sa question. La droite div devrait avoir la barre de défilement, pas l'écran complet. Pensé la question était principalement au sujet de la div droite n'étant pas affichée sous la div gauche. Je ne pense pas que je mérite le vote négatif. – Edelcom

Div côte à côte avec une largeur variée Div scrollable

Répondre

Questions connexes