suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Tipps zur prozentualen Höhe von HTML 5/CSS

<p>Ich versuche, ein <div> in CSS auf eine bestimmte prozentuale Höhe festzulegen, aber es hat immer noch die gleiche Größe wie der darin enthaltene Inhalt. Wenn ich jedoch HTML 5s <!DOCTYTPE html> entferne, funktioniert es einwandfrei und das <div> nimmt wie erwartet die gesamte Seite ein. Ich möchte, dass die Seite die Überprüfung besteht. Was soll ich tun? </p> <p>Ich habe dieses CSS auf <div> und seine ID ist <code>page</code>: </p> <pre class="brush:php;toolbar:false;">#page { Polsterung: 10px; Hintergrundfarbe: weiß; Höhe: 90 % !wichtig; }</pre>
P粉135292805P粉135292805460 Tage vor604

Antworte allen(2)Ich werde antworten

  • P粉759451255

    P粉7594512552023-08-21 18:49:34

    你还需要在<html>和<body>元素上设置高度；否则，它们只会足够大以适应内容。 例如：

    <!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

    Antwort
    0
  • P粉530519234

    P粉5305192342023-08-21 00:27:22

    百分比是什么的百分比？

    要设置百分比高度，其父元素(*)必须具有显式高度。这是相当明显的，如果您将高度保留为auto，则块将采用其内容的高度...但是，如果内容本身的高度以父元素的百分比表示，您就陷入了一个小困境。浏览器放弃了，只使用内容高度。

    因此，div的父元素必须具有显式的height属性。虽然如果您愿意，该高度也可以是百分比，但这只会将问题提升到下一个级别。

    如果您想要使div的高度成为视口高度的百分比，则div的每个祖先元素，包括<html>和<body>，都必须具有height: 100%，因此存在一个显式的百分比高度链到div。

    (*：或者，如果div被定位，则为“包含块”，即最近的也被定位的祖先元素。)

    或者，所有现代浏览器和IE>=9都支持相对于视口高度(vh)和视口宽度(vw)的新CSS单位：

    div {
    height:100vh; 
}

    在此处查看更多信息。

    Antwort
    0
  • StornierenAntwort