Wie man die Höhe eines div reaktionsfähig macht?

Ich möchte ein Div wo, wenn die Höhe dieses div 450px überschreitet wird es Scroller sein. Ich bin in der Lage, das zu tun, indem ich dem div einen Klassennamen say, fixedScroll_450 hinzufüge.Wie man die Höhe eines div reaktionsfähig macht?

<div class="fixedScroll_450" id="content"></div>

nun der Inhalt des div dynamisch generiert werden, und wenn es 450px Höhe überschreitet, wird es sonst nicht Stellrad sein. Jetzt für das Styling füge ich in der Klasse

.fixedScroll_450{ 
    min-height: 450px; 
    max-height: 450px; 
    width: 100%; 
    margin: 0; 
    overflow-y: auto; 
}

es funktioniert gut .. Aber ich will die Höhe in Prozentwert nicht in Pixel geben. Aber

.fixedScroll_450{ 
    min-height: 30%; 
    max-height: 30%; 
    width: 100%; 
    margin: 0; 
    overflow-y: auto; 
}

funktioniert nicht. die Höhe wird mit diesem Code auf 100% gesetzt. plz mich leiten ..

Quelle

2016-05-25 Subho

Zum einen arbeiten gibt es keine Notwendigkeit für min-height CSS-Style und bitte Mutter divs Höhe als 450px dann nur Höhe in% ab Werk festgelegt. –

Warum möchten Sie Prozent? Mit anderen Worten, möchten Sie Prozent der Höhe von was genau? der Elternteil DIV? die ganze Seite? das Browserfenster? – Meligy

Verwenden vh CSS-Einheit für die Höhe wie max-height: 30vh

.fixedScroll_450{ 
 
    max-height: 30vh; 
 
    width: 100%; 
 
    margin: 0; 
 
    overflow-y: auto; 
 
}

<div class="fixedScroll_450" id="content">Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>

Quelle

2016-05-25 06:41:14

Dies kann durch Einstellen der Höhe auf der HTML-und Body-Tag

html, 
body { 
    height: 100%; 
}

In CSS thos zwei Elemente haben keine Höhe festgelegt festgelegt werden. Mit min-height: 30% hat der Browser keine berechnete Höhe. In dem Moment, in dem Sie einen Inhalt hinzufügen, wächst die Höhe der Tags html und body mit dem Inhalt selbst und nicht mit der Höhe der Seite.

Wenn Sie andererseits sicherstellen möchten, dass es immer 30% der Bildschirmhöhe ist, können Sie 30vh (30% der Höhe des Ansichtsfensters) verwenden. Eine weitere Erläuterung dieser Einheiten sind hier zu finden: https://developer.mozilla.org/en-US/docs/Web/CSS/length

Quelle

2016-05-25 06:38:39

Wenn Sie es würde auf das übergeordnete Element nicht Höhe liefern nimm die Höhe des div-Tags <div class="fixedScroll_450" id="content"></div> basierend auf dem Inhalt, den es hat. Sie müssen dem übergeordneten Element dieses div-Tags eine feste Höhe zuweisen, damit die Bildlaufleiste funktioniert.

Quelle

2016-05-25 06:41:22 Pushpendra

Hier ist ein bisschen anders von einem Ansatz. Wenn Sie Flexbox (siehe Browser-Unterstützung here) verwenden, können Sie es wie folgt tun könnte:

.outer-wrapper { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left:0; 
 
    right:0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 30%; 
 
    background-color: #64b92a; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex:1; 
 
    flex-direction: column; 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
} 
 

 
.fixedScroll_450{ 
 
    height: 100%; 
 
}

<div class="outer-wrapper"> 
 
    <div class="wrapper"> 
 
    <div class="fixedScroll_450"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-05-25 06:41:34 thepio

Sie brauchen nur Höhe wie das durch jquery einzustellen. die max-height durch CSS entfernen und versuchen Sie es, ich hoffe, es sollte

$('#content').css('height':$(window).height()+'px')

Quelle

2016-05-25 06:41:53

Wie man die Höhe eines div reaktionsfähig macht?

Antwort

Verwandte Themen