1. Accueil
  2. Question et réponse
  3. Dans une mise en page à deux colonnes, comment faire pour étendre une colonne à la largeur totale si j'enlève l'autre colonne?

Dans une mise en page à deux colonnes, comment faire pour étendre une colonne à la largeur totale si j'enlève l'autre colonne?

2010-02-03 3 views
1

mieux expliqué avec un balisage:Dans une mise en page à deux colonnes, comment faire pour étendre une colonne à la largeur totale si j'enlève l'autre colonne?

HTML:

<div><!--both sidebar and content share width--> 
    <div id="content"><!--maybe at 30%--> 
    </div> 
    <div id="sidebar"><!--may be at 70%--> 
    </div> 
</div>

CSS:

#sidebar{float:left;} /* no idea what width*/ 
#content{float:right;} /* no idea what width*/

Ce que je veux faire est que si la barre latérale n'est pas présent dans le balisage, la div contenu se développe pour prendre la place de la barre latérale:

<div> 
<div id="content"><!--width now at 100%--> 
</div> 
</div>

Source

2010-02-03 yretuta

Répondre

0

vous pouvez acheive si vous retournez votre divs autour comme si:

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Fluid Columns</title> 
<style type="text/css"> 
<!-- 
div{height:100px; margin-bottom: 50px; color: #fff;} 
#sidebar{float:left;background: red;} /* no idea what width*/ 
#content{background: blue;} /* no idea what width*/ 
--> 
</style> 
</head> 


<body> 
<div><!--both sidebar and content share width--> 
    <div id="sidebar"><!--may be at 30%--> 
    Sidebar 
    </div> 
    <div id="content"><!--maybe at 70%--> 
    Partial Width 
    </div> 
</div> 

<div> 
<div id="content"><!--width now at 100%--> 
Whole Width 
</div> 
</div> 
</body> 
</html>

Le seul inconvénient de cette approche est que vous aurez besoin de connaître la largeur de votre sidebar si vous voulez ajouter un padding à votre contenu div. C'est réparable, mais que je n'était pas vraiment votre question, vous dire comment sucer les œufs, je suis sûr que vous pouvez travailler dehors;)

Source

2010-02-03 02:02:05

0

celui-ci est délicat:

Si vous définissez la largeur sur la barre latérale, le flotteur, et ne réglez pas la largeur du contenu (aussi, ne flottent pas le contenu soit comme cela entraînera la div « shrink-wrap »). Ensuite, la colonne se comportera comme vous le souhaitez. Je voudrais ajouter que ceci est intrinsèquement squameux et souvent limitatif. Votre meilleur pari est, si vous contrôlez la mise en page du côté du serveur (vous avez un script qui génère des mises en page), puis ajoutez des classes css au document avant qu'il ne soit rendu. Une solution html pure est possible, mais elle repose également sur ce comportement particulier. Si vous voulez faire flotter le div #content, cela ne fonctionnera pas (parce que vous serez forcé de spécifier les dimensions pour éviter l'effet de rétrécissement).

Vous pouvez également le faire en utilisant javascript. La chose à surveiller car il est vous pourriez obtenir un FOUC (FOUC) que les coups de pied javascript dans.

Avec jQuery, vous pouvez faire quelque chose comme compter les divs adjacents à savoir

jQuery('#content').nextAll().length

Ensuite, utilisez le résultat de faire quelque chose comme:

jQuery('#content').addClass('has_sidebar').

Source

2010-02-03 01:57:32 Koobz

0

Fonction:

<script type='text/javascript'> 
    /**** Minimising ****/ 

function Minimise() 
{ 
    document.getElementById('FirstColumn').style.width = '0%'; 
    document.getElementById('SecondColumn').style.width = '100%'; 
} 

/**** Expanding ****/ 

function Maximise() 
{ 
    document.getElementById('FirstColumn').style.width = '50%'; 
    document.getElementById('SecondColumn').style.width = '50%'; 
} 
    </script>

Pour exécuter la fonction

<a href="javascript:Minimise();">Click here to minimise column1 etc</a>

Ensuite, vous pouvez toujours ajouter dans le bloc de style pour cacher tout le contenu ou tout ce que vous devez faire aussi. Vous pouvez également utiliser une bascule, mais de cette façon peut travailler très bien en utilisant div. Cependant, vous voulez vraiment y aller.

Source

2010-02-03 02:04:31 Sphvn

2

Une méthode pure CSS utilisera table mise en page CSS:

CSS:

#wrapper{ 
    display: table; 
    width: 100%; 
} 
#content { 
    display: table-cell; 
    width: auto; 
} 
#sidebar { 
    display: table-cell; 
    width: 30%; 
}

HTML:

<div id="wrapper"><!--both sidebar and content share width--> 
    <div id="content"><!--maybe at 30%-->content 
    </div> 
    <div id="sidebar"><!--may be at 70%-->sidebar 
    </div> 
</div>

ci-dessus mais ne fonctionnera pas pour les anciens navigateurs comme IE6/7 etc. L'utilisation de javascript (comme mentionné par d'autres réponses à cet article) comme solution de repli sera idéale.

Source

2010-02-03 02:27:58

Questions connexes

 Questions connexes