Auto Höhe div mit Überlauf und scrollen wenn benötigt

Ich versuche, eine Website ohne vertikale Scrollen für eine Seite zu machen, aber ich brauche, dass eine der DIVs ich vertikal auf den unteren Rand der Seite (höchstens erweitern müssen)), und wenn es Inhalt hat, der nicht passt, sollte das Div einen vertikalen Scroller erstellen.Auto Höhe div mit Überlauf und scrollen wenn benötigt

ich habe bereits die css für die innerhalb der div in herausgefunden, Erstellen des Scrollers bei Bedarf. Ich habe auch herausgefunden how to make der Container div wachsen, um genau den vertikalen Raum zu nehmen, die es in der Seite hat. Ich kann sie einfach nicht zusammen trainieren!

bitte bedenken Sie, dass Sie in jsfiddle nicht in der Lage sein werden, den Inhalt der gesamten Website zu sehen und was Sie für die 2. Geige bekommen, zeigt nicht wirklich, was getan wird, aber es funktioniert wie ich beabsichtigt aber.

nur ein weiterer Hinweis: da sie verschiedene Geigen sind, ist das ID # Container Div in der 1. Geige er ID # dcontent div des 2. Beispiels.

Es gibt noch eine andere Sache: Für einen Inhaltstyp scrollt dieses div vertikal, aber für andere Arten von Inhalten möchte ich, dass es horizontal scrollt, da es einen Produkt "Slider" hat, der Elemente horizontal in diesem anzeigt DIV.

bitte auf diesem Foto sieht auch, weil es einfacher sein könnte, zu verstehen, was ich zu sagen versuchen: PICTURE

habe ich versucht, in Bezug auf diese Themen auf andere Fragen suchen, aber keiner schien mich alle Aspekte abzudecken Ich versuche zu lösen ...: S

Wenn es noch etwas gibt, das ich Ihnen helfen kann/ich :) es herauszufinden, bitte lassen Sie es mich wissen!

danke!

EDIT1: feste Tippfehler

EDIT2: hinzugefügt Bild zur Erklärung

Quelle

2012-04-14 Joum

Nun, nach langen Recherchen fand ich eine Abhilfe, das tut, was ich brauche: 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>

funktioniert vielleicht nicht mit dem horizontalen dingy, aber es ist ein work in progress!

Ich habe im Grunde fallen die "Inception" Boxen-Inside-Boxes-Inside-Boxes-Modell und verwendet feste Positionierung mit dynamischen Höhe und Überlauf-Eigenschaften.

Hoffen, das könnte helfen, wer auch immer die Frage später findet!

EDIT: Dies ist die endgültige Antwort.

Quelle

2012-04-15 16:55:54 Joum

Try this:
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>

Wenn Sie nicht tun wie absolute Positionierung in diesem Fall kann nur wi spielen th machen ein Elternteil und ein Kind div zu diesem, beide mit position:relative.

EDIT: Unten sollte funktionieren (ich die CSS inline nur für den Moment) setzen:

<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>

Quelle

2012-04-15 02:52:31 preahkumpii

dies funktioniert gut mit dem * inside * des div mit dem Inhalt und es ändert Größe zu ocuppy den vertikalen Speicherplatz zur Verfügung, aber ich * wächst * nicht * innerhalb des Containers, wie ich es brauche ... BTW, ich Ich versuche dein redigieren .... die Sache ist, dass der Elternteil div in deinem zweiten Codebeispiel innerhalb eines anderen Behälters in meinem Code ist ... überprüfen Sie das Bild oben für eine klarere Beschreibung ... irgendwelche mehr Ideen? – Joum

yup ... nicht funktioniert: S hier ist die Geige mit dem Ergebnis Ihres Tests: http://jsfiddle.net/CqB3d/ das rote Grenze div sollte zwischen den schwarzen Balken übergelaufen bleiben und den vertikalen Scroller anzeigen. und wenn die Auflösung vielleicht anders wäre, sollte nur das div mit rotem Rand * wachsen *, um die Größe zu ändern ... ich bin hier total verloren: S weiß nicht, ob es die Höhe ist: automatische Einstellung, die dieses Verhalten auf diese Weise bewirkt oder wenn es etwas mit dem Inhalt des Div ... – Joum

-5

ich denke, es ist ziemlich einfach. Nur diese css verwenden

.content { 
    width: 100%; 
    height:(what u wanna give); 
    float: left; 
    position: fixed; 
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: none; 
}

danach nur diese Klasse geben div ur genau wie -

<div class="content">your stuff goes in...</div>

Quelle

2012-05-02 11:22:07

-1

Das ist, was ich bisher tun verwaltet. Ich schätze, das ist etwas, was du herausziehst. Das einzige ist, dass es mir immer noch nicht gelingt, dem Container DIV die richtige Höhe zuzuweisen.

->JSFIDDLE

Quelle

2012-05-05 03:54:06

jsfiddle Link nicht gefunden hat. Sollte der Code in Ihrer Antwort nicht nur Links enthalten? –

Schnell Antwort mit Hauptpunkten

So ziemlich die gleiche Antwort als die besten ausgewählten Antwort von @Joum, Ihre Suche von beschleunigen versucht, die Antwort auf den geschrieben zu erreichen Frage und spart Zeit von entziffern, was in der Syntax los -

Antwort

Setze das Positionsattribut auf fixed, setze die oberen und unteren Attribute nach deinen Wünschen für das Element oder das Div, das im Vergleich zu seinem Elternelement eine "automatische" Größe haben soll, und setze dann den Überlauf auf versteckt.

.YourClass && || #YourId{ 
    position:fixed; 
    top:10px; 
    bottom:10px; 
    width:100%; //Do not forget width 
    overflow-y:auto; 
}

Wallah! Dies ist alles, was Sie für Ihr spezielles Element benötigen, um eine dynamische Höhe entsprechend der Bildschirmgröße und/oder dynamischen eingehenden Inhalten zu erhalten und gleichzeitig die Möglichkeit zum Scrollen zu erhalten.

Quelle

2016-05-09 18:54:30 MattOlivos

Dies ist eine horizontale Lösung mit der Verwendung von FlexBox und ohne die lästige absolute Positionierung.

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>

Quelle

2017-07-31 08:27:53 TranslucentCloud

Ich bin überrascht, die niemand calc() noch erwähnt.

Ich konnte Ihren speziellen Fall nicht von Ihren Geigen ausmachen, aber ich verstehe Ihr Problem: Sie möchten einen height: 100% Container, der immer noch overflow-y: auto verwenden kann.

Dies funktioniert nicht out-of-the-box, weil overflow erfordert eine fest codierte Größenbeschränkung, um zu wissen, wann es beginnen sollte, Überlauf zu behandeln. Also, wenn Sie mit height: 100px gingen, würde es wie erwartet funktionieren.

Die gute Nachricht ist that calc() can help, aber es ist nicht so einfach wie height: 100%.

calc() können Sie willkürliche Maßeinheiten kombinieren.

Also, für die Situation, die Sie im Bild beschreiben Sie umfassen:

Da alle Elemente oberhalb und unterhalb des rosa div einer bekannten Höhe sind (sagen wir mal, 200px in Gesamthöhe), können Sie calc die Höhe ole kleiner Finger zu bestimmen:

height: calc(100vh - 200px);

oder 'Höhe 100% der Ansichtshöhe minus 200 Pixel ist.'

Dann sollte overflow-y: auto wie ein Charme funktionieren.

Quelle

2017-08-18 22:08:29 Brandon

Auto Höhe div mit Überlauf und scrollen wenn benötigt

Antwort

Verwandte Themen