Rembourrage ignoré lors de la production d'un débordement vertical?

JSFiddle pour démontrer.Rembourrage ignoré lors de la production d'un débordement vertical?

Redimensionner la fenêtre pour forcer une barre de défilement lorsque la table ne peut plus rétrécir - plusieurs problèmes se produisent;

La fenêtre coupe dans le remplissage du fond de <main> sans afficher la barre de défilement.
La barre de défilement apparaît d'abord lors de la découpe du contenu de la table (violet).
<body> (jaune) est court lors du défilement - montrant <html> (vert).

L'effet souhaité est une table qui sera la plus grande possible (en hauteur).

Réglage min-width:100% dans <body> semble faire venir pas court lors du défilement - même si je ne peux pas sembler mettre ses enfants pour couvrir toute la hauteur.

Source

2017-09-07 user1768788

@AndersKink Vous ne savez pas quelle est la pertinence de la largeur - vous êtes également lié au même violon que moi? – user1768788

désolé vous a mal compris. –

Définissez body sur min-height: 100vh; plutôt que height: 100%;. Vous forcer une hauteur fixe même lorsque le corps a plus de contenu que ce qu'il peut afficher.

JSFiddle showing the fix.

Edit: Si vous voulez que le main de prendre 100% de la fenêtre cependant, vous devrez définir main avoir min-height: 100vh;

Edit2: Pour l'élément table remplir le main élément, la seule façon que je peux voir est d'utiliser un "nombre magique" qui suppose que votre remplissage dans l'objet main ne changera pas.

table { 
    min-height: calc(100vh - 32px); /* magic number, double the padding of `main` */ 
}

Source

2017-09-07 11:23:28 fredrivett

Le problème demeure toujours; redimensionnement au-delà de la capacité de rétraction de la table puis défilement - montre le vert '' – user1768788

Excuses, un tweak de dernière minute l'a cassé. Ont corrigé l'installation (notez le corps à utiliser 'min-height: 100vh;'. [JSFiddle mis à jour] (https://jsfiddle.net/0Lyfb3hw/2/) – fredrivett

Les problèmes sont maintenant corrigés, bien que la fonctionnalité principale a disparu. La table n'occupe plus 100% de la hauteur quand c'est possible – user1768788

Rembourrage ignoré lors de la production d'un débordement vertical?

Répondre

Questions connexes