CODEWITHSUNDEEP
htmlcss
user2329093
user2329093

Reputation:

100% Height Sections

I'm looking to make sections of a website that have a 100% width and height. I see this all over the place (http://danedwards.me, http://tribalmedia.co.uk). Yes, these aren't completely filling the page, but you get the idea.

I don't want to use jQuery to create something that overrides scrolling and all that other jazz. I just want to have a simple HTML and CSS solution for this.

The big issue for me is that when I want to put content in the section, I want padding. The problem is that the section becomes bigger than 100%. So, I've taken code from other questions and pieced together a fiddle. When you scroll, notice the padding causes the section to be bigger than 100%.

The main question: Am I creating the sections the right way? If so, how do you I fix the padding issue? If not, what should I do?

Fiddle (my code): http://jsfiddle.net/shaansingh/W4EWC/

Full screen (here's where you'll notice the problem): http://jsfiddle.net/shaansingh/W4EWC/embedded/result/

Upvotes: 1

Views: 95

Answers (1)

j08691
j08691

Reputation: 207901

Add box-sizing:border-box; to your section CSS:

section {
    padding: 3%;
    box-sizing:border-box;
}

jsFiddle example

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

border-box: The width and height properties include the padding and border, but not the margin.

Upvotes: 3

Related Questions