CSS: Forcer un div à s'adapter à l'écran du navigateur?

Ok, j'essaie de faire un div correspondant à la taille de la fenêtre du navigateur. Donc j'ai une div avec hauteur: 100%. Tout cela est bien et bon. Cependant, cela contient une table (dans un contrôle ASPX je ne peux pas changer le code de, etc., etc.), et de nombreux niveaux il y a une div avec "height: 1869px" (et overflow: auto et position: relative si c'est important). Cela provoque le redimensionnement de la table et la page entière finit par défiler. outils de développement IE8 rapport ma div externe a seulement une hauteur de 896, mais la table (le seul élément enfant de celui-ci) contenu directement dans a la hauteur 1888.CSS: Forcer un div à s'adapter à l'écran du navigateur?

Voici l'idée de base:

<div style="height:100%"> 
    <table><tr><td> 
     <!-- A whole bunch of other stuff the WebPart spits out, including another couple divs --> 
      <div style="height:1869px"> 
    </table></tr></td> 
</div>

(Bien que il y a beaucoup de styles des classes, à la fois mon height:100% et son height:1869px sont définies en ligne - et le mien doit être parce que sinon sharepoint met height:400px)

Je ne peux pas changer quoi que ce soit en dessous de la div extérieur (il est généré par un SharePoint partie Web), et alors qu'il est possible de corriger avec un JavaScrip t pirater (trouver l'élément exact avec le problème et le tuer), ce n'est pas une solution maintenable puisque le composant WebPart peut changer. Merci de votre aide!

Source

2010-11-17 Robert Fraser

Can vous fournissez un exemple de balisage pour aider à expliquer? De plus, lesquelles de ces propriétés CSS proviennent des règles CSS et lesquelles proviennent de l'attribut style? –

@LeguRi - question mise à jour –

Curieux: Avez-vous seulement testé sur IE8? –

D'abord tu dois comprendre ce que vous voulez que votre solution ... si vous voulez limiter les objets internes à être plus courte, vous pouvez utiliser max-height et ajouter !important afin qu'il va remplacer la valeur 1869px

Source

2010-11-17 03:24:19 Mikhail

Je ne pense pas qu'utiliser! Important est toujours une bonne idée; en fonction de l'origine des différentes propriétés CSS, je serai très tenté de le faire. –

@LeguRi -! Important fait partie de CSS pour une raison, le jeter parce qu'il a tendance à être kludgey est à courte vue. Vous devriez utiliser! Important quand vous avez besoin de l'utiliser comme n'importe quel autre outil. Parfois, vous n'avez pas le contrôle sur tout, alors vous faites ce que vous avez à faire pour le faire disparaître. –

@mu est trop court - la spécificité CSS fait aussi partie de CSS pour une raison, et une meilleure que! Important: P mais étant donné que toutes les règles auxquelles l'OP se réfère sont des attributs de style! Important pourrait en fait être nécessaire - CSS Spécifiquement ne le coupera pas. –

Ne mettrait pas overflow: hidden sur le travail <div />?

Source

2010-11-17 03:22:17 Domenic

Cela cache juste le bas de la page (qui est en fait la partie la plus importante puisque j'ai besoin de la deuxième cellule de la table - qui contient des liens de navigation) pour être visible. –

Donc euh ... si vous voulez que tout se passe sur un écran, il va falloir que quelque chose soit coupé. Je suppose que vous voulez que la table soit coupée? Ce n'était pas du tout clair dans votre question initiale, mais si oui, alors donnez-lui une valeur max-height comme le suggère Mikhail ... – Domenic

CSS: Forcer un div à s'adapter à l'écran du navigateur?

Répondre

Questions connexes