CODEWITHSUNDEEP
htmlcss
m00t13
m00t13

Reputation: 65

Three divs to span across the entire page(full length and width) with percentage height

I want to create a basic webpage with header, content and footer, with the header and footer each taking up 30% of the page(viewport) and the content 60%, but I'm not sure how to go about it. I tried this code: CSS layout with fixed top and bottom, variable height middle but I couldn't use percentage height.

I already defined the height of html and body.

Upvotes: 0

Views: 85

Answers (1)

caldera.sac
caldera.sac

Reputation: 5088

is this what you want.check this and try it

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    </head>
    
    <style type="text/css">
        
        body{
        	margin: 0;
        	padding: 0;
        }
        
    	div.maindiv{
    		width: 100%;
    		height: 768px;
    	}
    	div.header{
    		width: 100%;
    		height: 10%;
    		background-color: orange;
    	}
    
    	div.content{
    		width: 100%;
    		height: 60%;
    		background-color: black;
    	}
        div.footer{
        	width: 100%;
        	height: 30%;
        	background-color: orange;
        }
    
    </style>
    
    <body>
     <div class="maindiv">
     	<div class="header">header</div>
     	<div class="content">content</div>
     	<div class="footer">footer</div>
    
     </div>
    
    </body>
    </html>

Upvotes: 1

Related Questions