21–30 of 35 posts
Is this the kind of code that you're looking for? http://files.thegooley.com/example-fullpage-app.html
Do you have to use ?
You need 6 div. one container. Everything goes in there. One header, one wrapper that holds the two big boxes and a footer. Set HTML & body height to 100%. If you don't your container and other divs will likely ignore your height:100% Everything else you need from there is float, position, clear, width and height. Should even be compatible with most versions of IE. Sp yes it is possible and even simple with HTML and…
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body {
height: 100%;
width: 100%;
border: 0px;
margin: 0px;
padding: 0px;
}
.header,.footer {
width: 100%;
height: 10%; /*use percentage or fixed size*/
border: 1px solid red;
}
.content {
width: 100%;
height: 80%;
}
.leftPanel, .rightPanel {
width: 50%;
float: left;
border: 1px solid red;
height: 100%;
}
Hey I'm a header
Left Panel Here
Right Panel
I'm a footer
And it's probably been answered there already.But what heck.
Is this the kind of code that you're looking for? http://files.thegooley.com/example-fullpage-app.html
No, its not the same. When the text in the footer wraps, it leaves the page so you cannot read it anymore. In my example that does not happen. If you left all the text the same, that would be easier to see.
Add this: form { height: 100%; } td {height: 100%; }
http://raw.gibney.org/height_test_standards_1
Only problem: The textare is slighty misaligned.
Sure there is, here is my saturday morning no coffee's take on it: * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; width: 100%; border: 0px; margin: 0px; padding: 0px; } .header,.footer { width: 100%; height: 10%; /*use percentage or fixed size*/ border: 1px solid red; } .content { width: 100%; height: 80%; } .leftPanel, .rightPanel { width: 50%; f…
The form is the element screwing you over. It's compressing everything to minimum. Set form{height:100%} and it spans the page again. You can also move the form just inside of the table and get the desired effect.
Add this: form { height: 100%; } td {height: 100%; }
The best solution so far! http://raw.gibney.org/height_test_standards_1 Only problem: The textare is slighty misaligned.
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;