it-swarm.com.de

Automatische Höhenteilung mit Überlauf und Scrollen bei Bedarf

Ich versuche, eine Website ohne vertikales Scrollen für eine Seite zu erstellen, aber ich benötige einen der DIVs, die ich (höchstens) vertikal bis zum Ende der Seite erweitern muss, und zwar dann, wenn der Inhalt nicht passt sollte der div einen vertikalen scroller erstellen.

ich habe bereits die CSS für die innerhalb der Div herausgefunden in diese Geige , erstellen Sie den Scroller, wenn nötig. Ich habe auch herausgefunden, wie man es macht das Container-Div wächst, um genau den vertikalen Raum einzunehmen, den es auf der Seite hat. Ich kann sie einfach nicht zusammenbringen!

bitte beachten Sie, dass Sie in jsfiddle nicht in der Lage sind, den Inhalt der gesamten Website anzuzeigen. In diesem Sinne zeigt das, was Sie für die 2. Geige erhalten, nicht wirklich, was getan wird, aber es funktioniert, wie ich es beabsichtigt habe.

nur eine weitere Anmerkung: da es sich um verschiedene Geigen handelt, ist die ID # container div in der 1. Geige die ID # dcontent div des 2. Beispiels.

es gibt noch eine andere sache: für eine art von inhalt wird dieser div vertikal gescrollt, aber für eine andere art von inhalt möchte ich, dass er horizontal gescrollt wird, da er einen produkt "slider" hat, der die elemente horizontal in diesem div anzeigt.

bitte sehen Sie sich auch dieses Foto an, da es möglicherweise einfacher ist zu verstehen, was ich sagen möchte: PICTURE

ich habe versucht, nach anderen Fragen zu diesen Themen zu suchen, aber keine schien alle Aspekte abzudecken, die ich zu lösen versuche ...: S

wenn es noch etwas gibt, das ich dir/mir zur Verfügung stellen kann :) es herauszufinden, lass es mich wissen!

vielen Dank!

EDIT1: Tippfehler behoben

EDIT2: Bild zur Erklärung hinzugefügt

37
Joum

Nun, nach langer Recherche habe ich eine Problemumgehung gefunden, die genau 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 noch nicht mit dem horizontalen Ding, aber es ist in Arbeit!

Grundsätzlich habe ich das Modell "Inception" Boxen-in-Boxen-in-Boxen fallen gelassen und eine feste Positionierung mit dynamischen Höhen- und Überlaufeigenschaften verwendet.

Hoffe das könnte helfen, wer die Frage später findet!

EDIT: Dies ist die endgültige Antwort.

16
Joum

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

Ich konnte Ihren speziellen Fall nicht aus Ihren Fiddles herausfinden, aber ich verstehe Ihr Problem: Sie möchten einen height: 100% - Container, der immer noch overflow-y: auto Verwenden kann.

Dies funktioniert nicht sofort, da overflow eine hartcodierte Größenbeschränkung erfordert, um zu wissen, wann der Überlauf behandelt werden soll. Wenn Sie sich also für height: 100px Entschieden haben, würde es wie erwartet funktionieren.

Die gute Nachricht ist dass calc() helfen kann , aber es ist nicht so einfach wie height: 100%.

Mit calc() können Sie beliebige Maßeinheiten kombinieren.

Für die Situation, die Sie auf dem Bild beschreiben, geben Sie Folgendes an: picture of desired state

Da alle Elemente über und unter dem pinkfarbenen div eine bekannte Höhe haben (sagen wir, 200px In der Gesamthöhe), können Sie calc verwenden, um die Höhe von ole pinky zu bestimmen:

height: calc(100vh - 200px);

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

Dann sollte overflow-y: auto Wie ein Zauber wirken.

18
Brandon

Schnelle Antwort mit Hauptpunkten

Ziemlich die gleiche Antwort wie die beste Antwort von @Joum, um Ihre Suche nach einer Antwort auf die gestellte Frage zu beschleunigen und Zeit zu sparen, damit Sie nicht entschlüsseln müssen, was in der Syntax vor sich geht.

Antwort

Setzen Sie das Positionsattribut auf "fest", setzen Sie die oberen und unteren Attribute für das Element oder den Div, dessen "automatische" Größe Sie im Vergleich zum übergeordneten Element erhalten möchten, nach Ihren Wünschen und setzen Sie den Überlauf auf "ausgeblendet".

.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, damit Sie eine dynamische Höhe entsprechend der Bildschirmgröße und/oder dem dynamischen eingehenden Inhalt erhalten und gleichzeitig die Möglichkeit zum Scrollen behalten.

10
MattOlivos

Versuche dies:
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 die absolute Positionierung in diesem Fall nicht mögen, können Sie einfach damit spielen, ein Eltern- und ein Kind-Div zu diesem zu machen, beide mit position:relative.

BEARBEITEN: Unten sollte funktionieren (ich habe gerade das CSS inline gestellt):

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

Das ist mir bisher gelungen. Ich denke, das ist eine Art, was Sie versuchen, herauszuholen. Das einzige ist, dass ich es immer noch nicht schaffen kann, dem Container DIV die richtige Höhe zuzuweisen.

JSFIDDLE

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

Und das 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;
}
1

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