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

Div height percentage_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:41:56
Original
1129 people have browsed it

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>
Copy after login

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template