CODEWITHSUNDEEP
htmlcss
Steven_Harris_
Steven_Harris_

Reputation: 1121

Content outside body tag

I'm using: 

html, body {
     height: 100%;
}

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

And it seems all the content that appears below .full aren't included in the body tag, is there a way to rectify this? Or does it not matter that it is like this.

I tried changing the overflow value and change the height to auto but nothing seems to work.

<body>

<section class="full">

     <div class="center"></div>

</section> <!-- Everything below here appears outside <body> -->

<section class="main">

<header>
<!-- Nav goes here -->
</header>

<content>
<!-- Main divs are here -->
</content>

</section> 

</body>

Upvotes: 0

Views: 5931

Answers (3)

Aaron Digulla
Aaron Digulla

Reputation: 328556

A height of 100% doesn't mean "100% height of the content" but "100% of the height of the parent element". For html and body, the viewport is the parent. So if your browser window is 1000 pixels high, that will be the size of body.

The section element gets the same height as body (i.e. each of them will be 1000 pixels).

So the first step is to remove the height: 100% everywhere. The next step would then be to tell us which effect you want to achieve.

Upvotes: 0

avrahamcool
avrahamcool

Reputation: 14094

This is because you have a CSS rule that gives 100% height to all the <section>'s in the markup.

The first section (that with the 'full') takes all the view port height (that is possible only because you also gave html,body 100% height - which is the view port's actual height), causing the browser to add a vertical scroll that allows you to see the rest of the content.

See this demo here.

Upvotes: 3

Marc Audet
Marc Audet

Reputation: 46785

Your webpage has two <section> elements each with height 100%, so the second one appears below the fold.

Upvotes: 1

Related Questions