Comment faire un div pour afficher les barres de défilement (sans hauteur fixe)?

Question

J'ai une page avec deux div s sur ce qui devrait remplir tout l'écran.

Les deux ont une largeur = 100%

L'une hauteur supérieure de doit être définie par son contenu (la hauteur minimale possible qui correspond à tout le contenu) et ne jamais montrer barres de défilement.

Celui du bas doit remplir le reste de l'écran. Cependant, si son contenu ne correspond pas à la div, il devrait afficher la barre de défilement verticale.

Comme ceci:

<div id="header">This block should not display the scrollbars</div> 
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div> 

Comment puis-je faire avec CSS?

Mise à jour:

Je suis à la recherche d'une solution qui ne me obliger à régler la hauteur fixée pour la div supérieure.

Est-ce possible?

Answer 1

La seule façon dont je peux vous voir y parvenir est de Javascript. Je sais que vous n'avez pas tagué/demandé JS mais je ne peux pas penser à une solution CSS simple et élégante. Avec JS vous pouvez capturer l'événement onpropertychange de l'en-tête div, vérifiez si la propriété a été modifiée offsetHeight/clientHeight et ajustez la propriété de style supérieure de la div de contenu. Le contenu div aurait également besoin d'avoir position:absolute; et bottom:0px;.

Désolé si vous n'êtes pas intéressé par une solution JS, je ne pense pas qu'il y ait un CSS un sans accepter une expérience utilisateur ci-dessous ce que vous essayez d'atteindre.

Answer 2

Vous devez définir la largeur fixe pour la deuxième div et utiliser la propriété overflow css pour définir les barres de défilement.

Answer 3

Afin de le faire avec CSS, vous devez définir une hauteur sur la div bas, puis ajouter overflow: auto.

.content { 
    height:90%; 
    overflow:auto; 
} 

Malheureusement, cela signifie que votre haut div aura besoin d'une hauteur définie ainsi, parce que le contenu devra prendre une quantité prédéfinie de l'espace sur la page. Si vous utilisez des pourcentages pour la hauteur, vous devrez définir une hauteur pour votre div d'en-tête, de sorte que l'étirement et la réduction de la fenêtre du navigateur ne causent pas de problèmes.

Answer 4

cela devrait résoudre votre problème

#header{ overflow: hidden } 

#content{ overflow-y: auto } 

edit: vous devez définir la hauteur des divs aswell

Answer 5

est ici une solution complète css - http://jsfiddle.net/TUwej/2/

#container { width:500px; border:3px solid red; margin:0 auto; position:relative; } 

#sidebar { position:absolute; left:0; top:0; width:150px; height:100%; background-color:yellow; overflow-y:scroll; } 

#main { margin-left:150px; } 

Source: overflow (scroll) - 100% container height