Maison > interface Web > tutoriel HTML > Div高度百分比_html/css_WEB-ITnose

Div高度百分比_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:41:56
original
1131 Les gens l'ont consulté

有时候设置高度百分比,没有效果。

原因是父元素没有设置高度。

 

父元素可以设置高度为具体的px。或是100%等百分比。

这样子元素再能根据百分比来设置高度。

  <style type="text/css">        html,body {            width:100%;            height:100%;            margin:0px;            padding:0px;        }        .center {            width:80%;            margin:auto;        }        #top {            height:20%;            background-color:yellow;        }        #module {            height:60%;            background-color:gray;        }        #bottom {            height:20%;            background-color:blue;        }    </style><body>    <div id="top" class="center"></div>    <div id="module"  class="center"></div>    <div id="bottom"  class="center"></div></body>
Copier après la connexion

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal