Heim > Web-Frontend > HTML-Tutorial > Div高度百分比_html/css_WEB-ITnose

Div高度百分比_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:56
Original
1134 Leute haben es durchsucht

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

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

 

父元素可以设置高度为具体的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>
Nach dem Login kopieren

 

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