div avec largeur contenu complet

Le contenu simplifié de ma page html est:div avec largeur contenu complet

<body> 
    <div id="container"> 
     <div class="header"></div>     
     <div class="main-content" style="float:none; align:center; text-align:center; margin:auto;"> 
      <table style="width: 2000px;"> 
       <tr> 
        <td>Some Content</td> 
       </tr> 
      </table>    
     </div>  
     <div class="footer">    
      <a href="#">EMS</a> 
      </div> 
    </div> 
</body>

Le Css:

html, 
body { 
height: 100%; 
margin: 0px; 
padding: 0px; 
} 
body { 
font-family: "Liberation Sans",'Lucida Grande',Verdana,Arial,Helvetica, "Luxi Sans", "Bitstream Vera Sans", Tahoma,Sans-Serif; 
font-size: 90%; 
background: #FAFAFA; 
color: #333333; 
} 
#container { 
background:#AEC7DB url('../main-bg-gradient.png') repeat-x top left; 
position: relative; 
min-height: 100%; 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
max-width: 100%; 
} 
.main-content { 
position: relative; 
padding: 0px; 
} 
.footer { 
clear:both; 
font-family: Georgia,"Times New Roman",Times,serif; 
font-size: 90%; 
padding: 4px 0px 4px 0px; 
text-align: center; 
}

Comme vous pouvez le voir, j'ai ajouté une largeur de table 2000px. Comme parce que j'ajouterai table dynamiquement. Et cela provoque la déformation de la page. La div avec id "container" ne couvre pas son contenu. Il prend la taille de mon écran et le reste de la partie à gauche est blanc aussi il y a une barre de défilement horizontale car c'est naturel avec une table de 2000px. Ce dont j'ai besoin, c'est que la div avec id "container" couvre tout son contenu et la div avec id "header" reste fixe dans sa position si on fait défiler la page horizontalement.

Comment puis-je y parvenir?

Merci.

Source

2011-06-05 Tapas Bose

http://jsfiddle.net/n26Lc/ –

La première solution est de changer le width de #container100%-2000px et enlever max-width .

Démo: http://jsfiddle.net/h3TQ3/

Une deuxième solution consiste à supprimer max-width et width de #container et changer position:relative à position:absolute

Démo: http://jsfiddle.net/h3TQ3/1/

Pour que votre tête en position fixe, vous pouvez ajouter ce qui suit css:

.header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
}

Source

2011-06-05 18:44:12 Sotiris

La solution pour l'en-tête a fonctionné, mais je ne peux pas définir 'width' de' # container' à 2000px comme je l'ai dit dans ma question que la table sera générée dynamiquement, je n'ai pas la possibilité de suivre la 'largeur 'de la table précédemment. –

@Tapas Bose alors je suppose que vous ne pouvez utiliser que du javascript. Par exemple, dans jQuery, vous pouvez écrire '$ (" # container "). Width ($ (" table "). Width());' Démo: http://jsfiddle.net/h3TQ3/2/ – Sotiris

Supprime la largeur de hauteur min-height et min-width de #container CSS.

Ajouter

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

Aussi, vous devrez définir la marge supérieure pour principal contenu pour correspondre .header

Source

2011-06-05 18:44:06 natedavisolds

div avec largeur contenu complet

Répondre

Questions connexes