Fitting the page to the screen

Question

I'm using this following code:

body {
    margin-bottom: 40px;
    margin-right: 30px;
    margin-left:  30px;
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}

Everything is good from the top and sideways but the page doesn't reach to the bottom. How can I get it to reach all the way to the bottom?

score 2 · Answer 1 · edited May 23 '17 at 11:56

Try this in CSS

body {
        margin-bottom: 40px;
        margin-right: 30px;
        margin-left:  30px;
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
         background-color: gray;
         height: 100%;
        }
        html, table
        {
            height:100%;
        }

Please correct your code at <body style=""> remove style="". it should be <body>
Make body have 100% of the browser height

Body looks to its parent (HTML) for how to scale the dynamic property, so HTML needs to be set too.

@Ori Gavriel Refael: Then you can set `height:90%`. – Amit May 06 '12 at 21:14 — Amit, May 06 '12 at 21:14

Chase · Accepted Answer · 2012-05-06T21:24:43.107

2

Add height: 100%;

http://jsfiddle.net/uTG2R/

EDIT:

It appeared that it wasn't only the html and body that needed to have their height set, but the table within was the actual culprit. By defining the height of the html and body tags we could then set the defined height of the table tag.

edited May 06 '12 at 21:24

answered May 06 '12 at 20:49

Chase

29,019
1
49
48

Do you have more CSS and HTML code that we can see to further investigate the problem? Or perhaps create your example on http://jsfiddle.net – Chase May 06 '12 at 20:54
Add the height: 100% to your html, body and table. I believe you're wanting to expand the table element, but in order for you to be able to use height: 100% on the table you must first put height:100% on the html and body. – Chase May 06 '12 at 21:00
check again..still not...some wierd thing... @Chase – Ori Refael May 06 '12 at 21:02
Hmm, well for one you may want to remove the overflow:hidden so that the end of the table isn't cut off. – Chase May 06 '12 at 21:12
perfect ! alil fixin it if u notice..there is stll alil small scrolling that can be done..i dont want that @Chase – Ori Refael May 06 '12 at 21:15
Yeah, I noticed that as well. I beleive it's due to the margins, so try making the body and table height 95% or so.. – Chase May 06 '12 at 21:16
Any time. It helped a lot being able to see the code, so thank you for that. Good luck! – Chase May 06 '12 at 21:22

score 0 · Answer 3 · answered May 06 '12 at 20:50

0

Add height: 100%; to your css. This should do what you require.

answered May 06 '12 at 20:50

frontendzzzguy

3,242
21
31

Try adding overflow: hidden; to it also. – frontendzzzguy May 06 '12 at 20:54

Zuul · Answer 4 · 2012-05-06T21:14:13.633

0

By the provided link 84.229.230.105:8080/NiceTry2/MyServlet, what you need is additionally to the body height, set also the height to 100% on the HTML tag.

CSS

html {
  height: 100%;
}

EDITED:

Just builded a Fiddle with a more accurate sample to solve the problem you are having without causing another one:

The Fiddle here!

Since the solution of 100% to stretch the body all the way down does solve the issue, the margin at the top and bottom of the body tag causes a certain overflow of the body tag, since 100% + 40px + 40px is always bigger than 100% :)

The Fiddle suggests that the HTML and BODY tags have 100% x 100% of the view port size, and using one absolutely positioned div to wrap the entirely page content. The mentioned wrapper gets the required margins.

edited May 06 '12 at 21:14

answered May 06 '12 at 21:01

Zuul

16,217
6
61
88

only in html alone it doesnt help, but added table to it, now it expands all the page too 100% ignoring the Bottom Mergin that i wrote before. @zuul – Ori Refael May 06 '12 at 21:10
@Ori Gavriel Refael, just edited the answer with a solution to that particular problem :) – Zuul May 06 '12 at 21:15
One question! Do you also want the table all the way down? and all the way to the right? – Zuul May 06 '12 at 21:17

Fitting the page to the screen

4 Answers4