So legen Sie die Höhe eines Elements in CSS so fest, dass es adaptiv ist

Die Methode zur adaptiven Einstellung der Elementhöhe in CSS besteht darin, die Elementpositionierung und -auffüllung zu verwenden, um bestimmte Elemente hochgradig anpassungsfähig zu machen. Der Code lautet [position: relative;padding: 60px 0 0;].

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So legen Sie die Anpassung der Elementhöhe in CSS fest:

Sie können Elementpositionierung + Auffüllung verwenden, um bestimmte Elemente hochgradig anpassungsfähig zu machen.

CSS-Stil:

html,body{
    height:100%;
    margin:0;
    padding:0;  
}
.wrap {
    height:100%;
    box-sizing: border-box ; 
    position: relative;
    padding: 60px 0 0;   
}
.header {
    height: 60px;
    position: absolute;
    top: 0;
    width: 100%;
}
.content {
    height:100%;
}

html:

<div class="wrap">
        <div class="header">
            我是头部信息
        </div>
        <div class="content">
            我要高度自适应
        </div>
    </div>

Der Effekt ist wie folgt:

Verwandte Tutorial-Empfehlungen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie die Höhe eines Elements in CSS so fest, dass es adaptiv ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!