Home  >  Article  >  Web Front-end  >  Div height percentage_html/css_WEB-ITnose

Div height percentage_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:41:561102browse

Sometimes setting the height percentage has no effect.

The reason is that the parent element does not have a height set.

The parent element can set the height to a specific px. Or 100% and other percentages.

In this way, the height of this element can be set based on the percentage.

  <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>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:html garbled problemNext article:html garbled problem