Discussion :

[djo007]

Bonjour à tous,

Déjà pour commencer merci de votre aide,

voici mon problème:

j'ai une <div> </div> qui fais 297mm de haut et 210 de large.
dans cette <div> j'appel des information provenant de ma base de donnée.
il peut arriver que la div soit trop petite, du coup cela dépasse en bas de la <div>. ce qui me pose un problème..

je voudrais éviter cette erreur et donc à partir du php créer une nouvelle <div> dans le quel continue met information. je ne veux pas de barre de défilement.

j'ai vraiment aucune idée pour ça...
peut étre compter le nombre de ligne en php et poser une condition.

j'espère que vous en aurez plus d'idée que moi en tout cas...

Merci d'avance

[RunCodePhp]

Salut

A mon sens ton problème n'a rien avoir avec Php et encore moins avec MySQL.
C'est un souci de HTML/CSS.

Si tu veux qu'un texte (genre paragraphe) occupe toute la DIV quelque soit sa hauteur ou sa largeur, alors il ne faut pas définir de valeurs à ce niveau.

Si c'est juste la hauteur, alors ne défini rien pour la hauteur.

Par ailleurs, l'unité de mesure "mm" n'est pas adapté pour le type de média "screen", c'est à dire pour un rendu dans un navigateur.
Des unités comme le %(pourcentage), px (pixel), em (relative) sont plus appropriés.

Les mm, cm, sont rarement utilisés.
Si c'est pour un document qui sera à la fois visualisé à l'écran (media screen) et à la fois être imprimé (media print), il faut 2 feuilles de styles pour ça.
Fait des recherche sur le Net, tu trouveras pleins d'infos à ce sujet.

[Benjamin Delespierre]

Curieusement, c'est pas la première fois que je vois quelqu'un sortir la règle pour mesurer des éléments sur la page comme si tous les écrans avaient le même DPI

Bref, je ne vois pas non plus ce que tu veux faire à vouloir forcer la taille en hauteur d'un bloc pour un contenu variable, ça n'a aucun sens. Si c'est pour que la page ne défile pas, je rappelle que

• il est impossible de connaitre le view port réél de l'utilisateur avec CSS, donc impossible de savoir s'il y aura du défilement ou non
• empêcher le défilement d'une page web, ce serait comme interdire de tourner les pages d'un livre, c'est absurde

Edit: J'avais pas fait attention à un détail, le format que tu nous donne est du A4 (21x29.7). Donc j'imagine que c'est pour impression que tu veux obtenir ce résultat je me trompe ? Si c'est bien le cas, tu n'a pas a te soucier toi même des dimentions présentes à l'écran. Ecris une feuille de style CSS pour media="print" et ne décris que les règles concernant les couleurs et tailles de caractères. Laisse le navigateur faire son travail pour la l'impression, il ajustera les textes et les pages tout seul.

[RunCodePhp]

Curieusement, c'est pas la première fois que je vois quelqu'un sortir la règle pour mesurer des éléments sur la page comme si tous les écrans avaient le même DPI

Et avec les différents supports qu'il y a de nos jours tels les smartphones, tablette PC, écran 14 pouces, 22 pouces, etc ... On fait comment ?

Si un architecte prends ça comme référence pour construire une maison, au bout ça risque d'être assez folklorique effectivement

[djo007]

Je réalise une prévisualisation de page à imprimer qui met réservé à moi personnellement pour mon boulot personnel

Donc pas d'autre écran pas de smartphone etc..

en clair met div représente une page.

es qu'il est possible d'avoir une fonction qui permet de savoir si, la div déborde ?

[RunCodePhp]

en clair met div représente une page.

Justement, non.
Tu as qu'une seule page qui intègre plusieurs DIV, et de manière très hasardeuse au niveau de l'espace tu espères provoquer des impressions sur plusieurs pages.

En faisant des recherches du genre "CSS impression" tu trouveras pleins d'infos.

Tu ne perçois pas qu'il y a pas mal de différences entre un rendu à l'écran et celui destiné à une imprimante.

Pourtant, il est bien plus pratique de définir un style pour l'écran et un pour l'impression.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
/* CSS pour écran (css/screen.css)*/
h1 {
    color: red;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
/* CSS pour écran (css/print.css)*/
@page {
    size: landscape;
}
h1 {
    color: black;
}
 
.cacher {
    display: none;
}
 
.saut_page {
    page-break: always;
}

Code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<html>
    <title>Nom de lapage</title>
<head>
    <link href="/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />
<head>
<body>
    <h1>Titre de la page (rouge pour écran, noir pour impression)</h1>
 
    <p>Un contenu commun aux 2 medias</p>
 
    <div class="cacher">Visible seulement coté écran</div>
 
    <div class="saut_page">
        <p>Contenu dans une nouvelle page</p>
    </div>
 
</body>
</html>

Dans cet exemple (simpliste), on vois qu'on peu définir certaines chose uniquement réservé à l'impression, et inversement.
De définir la disposition à l'impression (portrait, paysage, etc ...).
Comme la couleur rouge pour l'écran, noir à l'impression.
Masquer un ou plusieurs contenus/éléments à l'impression, mais visible à l'écran.
De forcer l'impression sur une nouvelle page, mais visible sur la même page à l'écran.
... etc, etc ...

A mon sens tu risque de passer à coté de l'essentiel en omettant cet aspect là.

Ceci dit, le CSS à ses limites, même pour l'impression.
De mon coté pour exemple, je crée plutôt des documents PDF en Php pour tout contenu destiné à l'impression, les mises en pages sont plus fidèles, moins hasardeuses, ça donne de meilleurs résultats.

es qu'il est possible d'avoir une fonction qui permet de savoir si, la div déborde ?

On t'a déjà donné la manière de faire.
Il faut juste ne pas définir de hauteur à un bloc où le contenu est variable.