Hauteur auto div avec débordement et défilement au besoin
J'essaie de faire un site Web sans défilement vertical pour une page, mais j'ai besoin que l'un des DIV que je dois développer verticalement vers le bas de la page (au plus), et que quand il a un contenu qui ne correspond pas , la div devrait créer un scroller vertical.
j'ai déjà le css pour le à l'intérieur de la div figuré dans ce violon , créant le scroller lorsque cela est nécessaire. J'ai également compris comment faire le conteneur div grandir pour occuper exactement l'espace vertical qu'il a dans la page. Je ne peux tout simplement pas les faire travailler ensemble!
n'oubliez pas que dans jsfiddle, vous ne pourrez pas afficher le contenu de l'ensemble du site. Par conséquent, ce que vous obtenez pour le 2e violon ne montre pas vraiment ce qui se fait, mais cela fonctionne comme je le voulais.
juste une autre remarque: comme il s’agit de différents violons, l’identité id # container div du 1er violon est l’identité id # dcontent div du 2nd exemple.
il y a une autre chose: pour un type de contenu, cette div fera défiler verticalement, mais pour un autre type de contenu, je veux le faire défiler horizontalement, car il aura un produit "curseur" affichant des éléments horizontalement à l'intérieur de cette DIV.
s'il vous plaît regardez aussi cette photo car il pourrait être plus facile de comprendre ce que j'essaie de dire: IMAGE
j'ai essayé de regarder d'autres questions sur ces sujets, mais aucune ne semblait couvrir tous les aspects que j'essayais de résoudre ...: S
s'il y a quelque chose d'autre que je peux fournir pour vous aider/moi :) le comprendre, veuillez me le faire savoir!
merci!
EDIT1: fautes de frappe fixes
EDIT2: ajout d'une image pour l'explication
Après de longues recherches, j’ai trouvé une solution de contournement qui répond à mes besoins: http://jsfiddle.net/CqB3d/25/
CSS:
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#caixa{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
width: 800px;
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentBottom{
top: auto;
bottom: 0;
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
margin-left:auto;
margin-right: auto;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
width: 800px;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 800px;
}
HTML:
<div id="framecontentBottom">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
</div>
</div>
</div>
peut-être que le truc horizontal ne fonctionne pas encore, mais c'est un travail en cours!
En gros, j'ai abandonné le modèle "création" de boîtes-à l'intérieur de boîtes à l'intérieur de boîtes et j'ai utilisé un positionnement fixe avec des propriétés de hauteur et de débordement dynamiques.
J'espère que cela aidera ceux qui trouveront la question plus tard!
EDIT: Ceci est la réponse finale.
Je suis surpris que personne n'ait encore mentionné calc().
Je n'ai pas réussi à définir votre cas spécifique à partir de vos violons, mais je comprends votre problème: vous voulez un conteneur height: 100% Pouvant toujours utiliser overflow-y: auto.
Cela ne fonctionne pas immédiatement car overflow nécessite une contrainte de taille codée en dur pour savoir quand il convient de commencer à gérer le débordement. Donc, si vous utilisiez height: 100px, Cela fonctionnerait comme prévu.
La bonne nouvelle est que calc() peut aider , mais ce n'est pas aussi simple que height: 100%.
calc() vous permet de combiner des unités de mesure arbitraires.
Donc, pour la situation que vous décrivez dans l'image, vous incluez: 
Étant donné que tous les éléments situés au-dessus et au-dessous de la division rose ont une hauteur connue (disons, 200px En hauteur totale), vous pouvez utiliser calc pour déterminer la hauteur de ole pinky:
height: calc(100vh - 200px);
ou, 'hauteur correspond à 100% de la hauteur de vue moins 200px.'
Ensuite, overflow-y: auto Devrait fonctionner comme un charme.
Réponse rapide avec points principaux
Quasiment la même réponse que la meilleure réponse choisie de @Joum, pour accélérer votre quête de réponse à la question posée et gagner du temps en permettant de déchiffrer ce qui se passe dans la syntaxe -
réponse
Définissez l'attribut position sur fixed, définissez les attributs haut et bas à votre convenance pour l'élément ou la div dont vous souhaitez définir une taille "auto" par rapport à son élément parent, puis définissez le débordement sur masqué.
.YourClass && || #YourId{
position:fixed;
top:10px;
bottom:10px;
width:100%; //Do not forget width
overflow-y:auto;
}
Wallah! C'est tout ce dont vous avez besoin pour votre élément spécial que vous souhaitiez avoir une hauteur dynamique en fonction de la taille de l'écran et/ou du contenu entrant dynamique tout en conservant la possibilité de faire défiler.
Essaye ça:
CSS:
#content {
margin: 0 auto;
border: 1px solid red;
width:800px;
position:absolute;
bottom:0px;
top:0px;
overflow:auto
}
HTML:
<body>
<div id="content">
...content goes here...
</div>
<body>
Si vous n'aimez pas le positionnement absolu dans ce cas, vous pouvez simplement jouer à diviser parent et enfant avec celui-ci, les deux avec position:relative.
EDIT: Ci-dessous devrait fonctionner (je viens de mettre le css en ligne pour le moment):
<div style="margin:0 auto; width:800px; height:100%; overflow:hidden">
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto">
...content goes here...
</div>
</div>
C'est ce que j'ai réussi à faire jusqu'à présent. Je suppose que c'est un peu ce que vous essayez de retirer. La seule chose est que je ne parviens toujours pas à attribuer la hauteur appropriée au conteneur DIV.
Le HTML:
<div id="container">
<div id="header">HEADER</div>
<div id="fixeddiv-top">FIXED DIV (TOP)</div>
<div id="content-container">
<div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
</div>
<div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>
Et le CSS:
html {
height:100%;
}
body {
height:100%;
margin:0;
padding:0;
}
#container {
width:600px;
height:50%;
text-align:center;
display:block;
position:relative;
}
#header {
background:#069;
text-align:center;
width:100%;
height:80px;
}
#fixeddiv-top {
background:#AAA;
text-align:center;
width:100%;
height:20px;
}
#content-container {
height:100%;
}
#content {
text-align:center;
height:100%;
background:#F00;
margin:0 auto;
overflow:auto;
}
#fixeddiv-bottom {
background:#AAA;
text-align:center;
width:100%;
height:20px;
}
Il s’agit d’une solution horizontale utilisant FlexBox et sans le fastidieux absolute positionnement.
body {
height: 100vh;
margin: 0;
display: flex;
flex-direction: row;
}
#left,
#right {
flex-grow: 1;
}
#left {
background-color: lightgrey;
flex-basis: 33%;
flex-shrink: 0;
}
#right {
background-color: aliceblue;
display: flex;
flex-direction: row;
flex-basis: 66%;
overflow: scroll; /* other browsers */
overflow: overlay; /* Chrome */
}
.item {
width: 150px;
background-color: darkseagreen;
flex-shrink: 0;
margin-left: 10px;
}<html>
<body>
<section id="left"></section>
<section id="right">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>
</body>
</html>