CODEWITHSUNDEEP
html
Jurudocs
Jurudocs

Reputation: 9185

HTML Basics: Why is div not scaling to 100%

I don't see any reason why this snippet doesn't scale to 100 percent of the screen...does anyone know...i guess so...I just don't get it and here a fiddle: http://jsfiddle.net/uuzbv/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
width:100%;
height:100%;}

.section{
    height:100%;
    width:100%;
    background-color:#000;
    }
</style>
</head>

<body>
<div class="section">

</div>


</body>
</html>

Upvotes: 0

Views: 180

Answers (4)

Zensar
Zensar

Reputation: 817

It's the nature of positioning. By default your elements are set as position:static, which basically says that the element will be positioned as it occurs in the document. Therefore, the percentage height you defined in the &lt;body&gt; element has to obey the height rules set by the &lt;html&gt; element. Which in this case is essentially the default empty element height. If you notice, setting the position on the body to something like absolute or fixed will suddenly extend the box (whereas relative won't). This is because you are removing it from the normal flow of the page.

However, as most have pointed out, setting the height / width of the html, and body element will fix this issue, which is what I recommend. In fact, on most pages I do I usually start with:

html, body{
   width:100%;
   height:100%;
   padding:0;
   margin:0;
}

This will basically give you the full window space to work with inside the body of the page.

Upvotes: 1

Vivek
Vivek

Reputation: 641

use of property width:100% on html,body and section(if want to stretch full viewport) is reluctant or not needed coz by default they all are stretched to full viewport. u can set the height of desired pixels like height: required pixels or can also use nonbreaking spaces &nbsp;

Upvotes: 1

Blynn
Blynn

Reputation: 1421

You can try adding to the html dom element. It's hard to tell without any content.

*{width:100%;height:100%;}

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Use:

body, html {
   width:100%;
   height:100%;
}

Upvotes: 4

Related Questions