Adjusting the height of a button in an HTML form

Question

I am creating a calculator.This is my html for the calculator: http://pastebin.com/JQYbNBmZ

and this is my css for the calculator: http://pastebin.com/DEMgqyYi

I have used width="100%" for the buttons CE, CA and 0 to stretch 2 columns. However, if I use height="100%" for the buttons + and = to stretch 2 rows all the buttons actually get smaller. How would you go about that?

Unfortunately @bjedrzejewski's comment was misguided; we need debugging questions to include a [mcve] of the code in the question itself, rather than only linked to a JSFiddle or CodePen. — TylerH, Mar 16 '18 at 20:49
@bjedrzejewski The acronym was different, but yes the rule to reproduce the content has always been enforced. If not for the rules' sake, then for practicality's sake. — TylerH, Mar 19 '18 at 15:51
@TylerH - I agree, it is not great that these pages are removed now. Kind of makes the question worth deleting rather than keeping. — bjedrzejewski, Mar 19 '18 at 15:55

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

If you want to use a percentage value in height, the parent element must have a fixed height like height: 51px;.

You can check this for more informations : CSS – why doesn’t percentage height work?

I have updated your jsfiddle : http://jsfiddle.net/bsDVD/3/

edited May 23 '17 at 12:04

Community

1
1

answered Nov 23 '12 at 10:52

Magus

14,796
3
36
51

Yes, I tried this and it almost works, however something strange happens - all the buttons become shifted upwards and there is some whitespace between the buttons and the bottom of the cells. Also, although the buttons are shifted up, their values still continue to be centered in the middle of the cell. This is actually the same behaviour as at the beginning. – Alexander Popov Nov 23 '12 at 11:11
@AlexBG : Added a jsfiddle in my post. – Magus Nov 23 '12 at 11:20
@Magnus - yes, this is exactly what I am talking about - do you see how the numbers and signs in the buttons are centered while the buttons are shifted a little bit upwards. Also, there is some white space between the buttons and the bottom of the cells. – Alexander Popov Nov 23 '12 at 12:10

score 1 · Answer 2 · answered Nov 23 '12 at 11:20

1

The best idea would be to set height of all of your td to 2em lets say by doing:

td {
height: 2em
}

And forcing the inline style of the two expanded tables to have:

style="height: 4em"

After that add to your buttons height: 100% and it should work.

answered Nov 23 '12 at 11:20

bjedrzejewski

2,378
2
25
46

Adjusting the height of a button in an HTML form

2 Answers2