Heim > Web-Frontend > HTML-Tutorial > CSS-div高度100%设置问题_html/css_WEB-ITnose

CSS-div高度100%设置问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:33:33
Original
984 Leute haben es durchsucht

div常用的属性width和height,有的时候如果我们需要让div的高度是整个屏幕的高度,设置height:100%发现并没有什么作用,并不是这样设置不对,而是w3c规范中关于百分比的设置是相对于父元素的,如下所示:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>博客园-FlyElephant</title>    <style type="text/css">    .parent {        background: red;        height: 100%;    }    </style></head><body>    <div class="parent">    博客园-FlyElephant    </div></body></html>
Nach dem Login kopieren

发现div的高度只是文字的高度,如果需要让div铺满整个屏幕,我们需要设置一下父级元素的高度,也就是html和body:

    html,body {        height: 100%;        padding: 0;        margin: 0;    }
Nach dem Login kopieren

高度是相对于父级元素的,但是html级元素默认宽度是100%,即整行~

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