Comment faire en sorte que overflow : hidden cache réellement le contenu ?

Question

S'il vous plaît, regardez cet exemple . J'ai l'intention de faire une mise en page horizontale avec du pur html/css, ne vous souciez pas des vieux navigateurs. Je l'ai fait avec display: table technique. Mais l'affichage des conteneurs de texte principal (jaune clair) est devenu un problème. Chacun d'entre eux a overflow: hidden pour empêcher le défilement vertical. Plus tard, j'ai l'intention d'ajouter un effet d'ombre en bas. Maintenant, je veux faire, par exemple, 80% de hauteur avec 10% de marge en haut et en bas. Mais ce que j'obtiens, c'est un conteneur avec un texte plus grand qui s'étend sur tout le conteneur parent (vert clair), de sorte que 80 % de celui-ci est devenu trop important.

Existe-t-il un moyen de l'éviter sans javascript ?

Je peux peut-être obtenir un conteneur de texte de n'importe quelle hauteur, mais avec une certaine marge en bas. J'apprécierai toute solution.

Answer 1

N'utilisez pas de mise en page sous forme de tableau, car les divs des cellules de tableau ont du mal à définir leur largeur/hauteur et ne pourront donc pas respecter les règles de débordement.
mettez à jour les propriétés css suivantes dans votre layout.css, cela vous permettra de commencer :

#content{
    display:block;
    height:90%;
    overflow:hidden;
    vertical-align:top;
}

#content-inner{
    display:block;
    height:100%;
    vertical-align:top;
}

.article{
    display:inline-block;
}

Answer 2

Ce que vous voulez n'est toujours pas clair ; vous pourriez peut-être envoyer un croquis rapide ?

De toute façon, je voudrais éviter la barre de défilement horizontale. Pour ce faire, il faut définir #content { width: 61%;} (sur la base du reste du CSS). Actuellement, dans layout.css , #content width est fixé à 305%.

RE :

@Brock Adam, je veux dire que je veux que div.article-content occupe 80% de l'écran, et non 80% du conteneur parent. Je pense que cela peut être réalisé en forçant le div#content parent à occuper exactement 100% de l'écran, pas plus. Mais je ne sais pas comment faire.

div.article-content apparaît actuellement 5 fois dans la page. En le fixant à 80 % de l'écran, on obtient une page au moins 400 % plus large que ce que l'utilisateur peut voir.

Questions :

1. La première division est identifiée comme "header", mais elle est flottante à gauche et ne fait que 39 % de large. S'agit-il d'un en-tête (barre en haut de la page) ou d'une barre latérale gauche ?
2. Les articles sont-ils censés être répartis en 5 petites colonnes, sur la même ligne, ou sont-ils censés être l'un après l'autre, en faisant défiler la page ?

Là encore, les déclarations et la sémantique de la page d'exemple ne sont pas claires. En affichant un croquis rapide de la souhaité La mise en page nous aidera à vous aider.