Heim > Web-Frontend > CSS-Tutorial > Warum hat die CSS-Einstellung der Mindesthöhe auf den Körper keine Auswirkung?

Warum hat die CSS-Einstellung der Mindesthöhe auf den Körper keine Auswirkung?

黄舟
Freigeben: 2017-07-21 09:53:06
Original
4084 Leute haben es durchsucht

Wenn der Inhaltsbereich der Webseite nur sehr wenig Inhalt enthält, wird die Fußzeile nach oben verschoben?
Ich habe min-height:100%; für Body und HTML eingestellt, aber es hat keine Auswirkung.
Setze height: 100% und es ist in Ordnung, aber wenn es zu viel Inhalt gibt, passt es auf einen Bildschirm ?

body,html{   min-height:100%;
}body{   position:relative;
}.content{  podding-bottom:100px;
}.footer{position:absolute;bottom:0;left:0;height:100px;
}
Nach dem Login kopieren

Schreiben Sie so:

html {    
height: 100%;
}
body {    
position: relative;    
min-height: 100%;   
 box-sizing: border-box;    
 padding-bottom: 80px; /* .footer 的高度,为 footer 占位 */}
 .footer {    
 position: absolute;    
 bottom: 0;    
 left: 0;    
 width: 100%;    
 height: 80px;
}
Nach dem Login kopieren

Der obige Code ist mit IE8 und höher kompatibel

Ich bin auch auf ein solches Problem gestoßen und habe es so gelöst dies:

html,body,.content{    
min-height:100%;
}
html{    
-ms-text-size-adjust: 100%;    
-webkit-text-size-adjust: 100%;
}
body{    
background:#eeeeee;
}
Nach dem Login kopieren

Dann verwenden Sie die js-Steuerung, um $(".content").height($("html").height); zu erstellen. Ich halte diese Anpassung für zuverlässiger

100 % wird basierend auf dem übergeordneten Element verglichen, zum Beispiel

<div style="width:100px;">
    <div style = "width:50%;"></div>
</div>
Nach dem Login kopieren

Zurück zur Frage des ursprünglichen Posters, also kann HTML nur eine feste Höhe festlegen. Wenn Sie den Prozentsatz der Körpergröße festlegen möchten, dann tun Sie dies Legen Sie die erste Höhe des HTML-Elements fest!

Das obige ist der detaillierte Inhalt vonWarum hat die CSS-Einstellung der Mindesthöhe auf den Körper keine Auswirkung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage