Étirer la division à la taille maximale

Question

Mes css:

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: 100%;
  overflow: scroll;
  position: absolute;
}

#content {
  background-color: #fff;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
}

Ce que je veux:

Ce que j'ai:

Rouge = en-tête absolu
Blanc = #main avec des barres de défilement "bleues"
Vert = bordure de #content avec le texte à l'intérieur.

Je pense que c'est assez facile à résoudre mais je n'ai toujours pas réussi après avoir essayé pendant des heures :P

Mise à jour / simplifié jsfiddle: http://jsfiddle.net/YAgW2/9/

Answer 1

Pouvez-vous ne pas déplacer #content à l'extérieur de #main et le positionner où vous le souhaitez, c'est-à-dire au-dessus de #main ?

Answer 2

Votre CSS devrait être :

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: auto;
  overflow: scroll;
  position: absolute;
}

#content {
  background-color: #fff;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
  width:auto;
}

Answer 3

Utilisez le CSS suivant:

#main {
  display: block;
  top: 0px;
  bottom: 0px;
  height: auto;
  margin-top: 55px;
  max-width: 100%;
  overflow: scroll;
  position: absolute;
  background-color: green;
}

#content {
  white-space: nowrap;
  padding: 5px;
  color: white;
  background-color: red;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #eee;
  -moz-box-shadow: inset 0 0 5px #000;
  -webkit-box-shadow: inset 0 0 5px #000;
  box-shadow: inset 0 0 5px #000;
  margin: 5px;
}

Et le HTML suivant:

    Try to extend this text

Answer 4

Ajouter float: left; à #content résout le problème d'affichage!