webentwicklung-frage-antwort-db.com.de

Bildlaufleiste ohne feste Höhe/Dynamische Höhe mit Bildlaufleiste

Ich habe diese HTML-Struktur:

<div id="body">
    <div id="head">
        <p>Dynamic height without scrollbar</p>
    </div>
    <div id="content">
        <p>Dynamic height with scrollbar</p>
    </div>
    <div id="foot">
        <p>Fixed height without scrollbar</p>
    </div>  
</div>

Ich möchte die drei Teile im Hauptteil (#body) ohne Überlauf haben. Ich brauche also eine Bildlaufleiste im mittleren Teil.

Ich habe dieses CSS ausprobiert:

#content{
    border: red solid 1px;
    overflow-y: auto;
}

Und das:

#content{
    border: red solid 1px;
    overflow-y: auto;
    height: 100%;
}

Aber keiner von ihnen arbeitet.

Ich habe ein Beispiel bei JSFiddle gemacht.

Kann ich das nur mit CSS und HTML? Ich würde lieber Javascript vermeiden.

26
GuillaumeS

Flexbox ist eine moderne Alternative, mit der Sie dies ohne feste Höhen oder JavaScript tun können.

Das Setzen von display: flex; flex-direction: column; im Container und flex-shrink: 0; in der Kopf- und Fußzeile divs bewirkt den Trick

http://jsfiddle.net/cvmrvfhm/1/

42
mtyaka

Sie müssen eine feste Höhe angeben, Sie können nicht 100% verwenden, da dies nicht vergleichbar ist, wie in height=100% von was?

Bearbeitete Geige:

http://jsfiddle.net/6WAnd/4/

5
Philip Bevan

Benutze das:

style = "max-height: 300px; Überlauf: auto;" 

Um eine feste Höhe zu vermeiden

4
Sanchi Girotra

Die Antwort von JS auf diese Frage lautet:

http://jsfiddle.net/6WAnd/20/

oder etwas ähnliches

2
Philip Bevan

Ein schneller, sauberer Ansatz mit sehr wenig JS- und CSS-Auffüllung: http://jsfiddle.net/benjamincharity/ZcTsT/14/

var headerHeight = $('#header').height(),
    footerHeight = $('#footer').height();

$('#content').css({
  'padding-top': headerHeight,
  'padding-bottom': footerHeight
});
2
Benjamin
 <div id="scroll">
    <p>Try to add more text</p>
 </div>

hier ist der CSS-Code

#scroll {
   overflow-y:auto;
   height:auto;
   max-height:200px;
   border:1px solid black;
   width:300px;
 }

hier ist die Demo JSFIDDLE

2
user4148647

Wenn Sie einen vertikalen Bildlauf wünschen, müssen Sie eine feste Höhe in einem gewissen Grad einbeziehen. Wenn Sie keine feste Höhe für das betreffende Element oder für das übergeordnete Element festlegen möchten, gibt es eine andere Option: Feste Höhe für die untergeordneten Elemente. Dann haben Sie zum Beispiel einige Geschwister mit einer Höhe von 200px zusammengefasst und Ihr Element hat height: calc(100% - 200px); Auf diese Weise machen Sie die Höhe Ihres Elements dynamisch und haben das Zeug dazu, overflow-y: auto; und zu verwenden Gewünschte Schriftrolle holen.

<div id="body">
<div id="head">
    <p>Fixed size without scrollbar</p>
    <p>Fixed size without scrollbar</p>
</div>
<div id="content">
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
</div>
<div id="foot">
    <p>Fixed size without scrollbar</p>
    <p>Fixed size without scrollbar</p>
</div>  
#body {
    width: 300px;
    border: black dashed 2px;
    height: 400px; /*this is need only for the sake of the example. 
In the real code you will have height set by some ascendant element or 
at last throght the chain by the window  */
    overflow: hidden;
}
    
#head {
    height: 150px;
    background: red;
}

#content{
    overflow-y: auto;
    height: calc(100% - 200px)
}

#foot {
    height: 50px;
    background: blue;
}
0
P.Petkov

Ich weiß nicht, ob ich es richtig verstanden habe, aber löst dieses Ihr Problem?

Ich habe gerade den overflow-y: scroll; geändert.

#content{
    border: red solid 1px;
    overflow-y: scroll;
    height: 100px;
}

Bearbeitet

Versuchen Sie dann, Prozentwerte wie folgt zu verwenden: http://jsfiddle.net/6WAnd/19/

CSS markup:

#body {
    position: absolute;
    top; 150px;
    left: 150px;
    height: 98%;
    width: 500px;
    border: black dashed 2px;
}    
#head {
    border: green solid 1px;
    height: 15%;
}
#content{
    border: red solid 1px;
    overflow-y: scroll;
    height: 70%;
}
#foot {
    border: blue solid 1px;
    height: 15%;
}
0
Luis

Benutze das:

#head {
    border: green solid 1px;
    height:auto;
}    
#content{
            border: red solid 1px;
            overflow-y: scroll;
            height:150px;       
        }
0
Uttara

Ich habe ein ähnliches Problem mit dem Inhalt von PrimeNG p_Dialog, und ich habe den Stil unten für den contentStyle korrigiert

height: 'calc(100vh - 127px)'
0

Mit dem Anzeigeraster können Sie die Höhe jedes Abschnitts dynamisch anpassen.

#body{
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
}

Wenn Sie den obigen Code hinzufügen, erhalten Sie die gewünschten Ergebnisse.

Manchmal, wenn viele Ebenen von Gittern involviert sind, schränkt CSS Ihren #Inhalt nicht auf 1fr ein. In solchen Szenarien verwenden Sie:

#content{
  max-height:100%;
}
0
Aseem