Html form 100 height 100

Set input height 100% of parent

I have a little problem with setting input (type text) height to fit 100% of parents ( td ) height. I even tried to iterate through every input and set it height manually with jQuery, but it takes quite a lot of time (site I am working on has a lot of cells) and still doesn’t work on IE 7 and 8 (I have to make site work under those too). Here is a sample: http://st8.eu/test.html It would be greatly appreciated if anybody knows any solution/hack.

3 Answers 3

You cannot set height:100%; on an element if the parent hasn’t a set height.

Just set td < height: 30px; >and it should work.

Actually, my last link was not working. After a few researches, it seems that you cannot achieve what you want without some JavaScript. But as you said, you tried to use JavaScript, so I assume this should be what you’re looking for : Answer to the same kind of question (Have a look at its fiddle.) Seemingly, you won’t have the choice.

Can’t do it, different TR’s have different height in my case. I do understand percentage needs parent’s fixed size, but there must be a workaround.

Edited again, hope it fills what you want, there doesn’t seem to be anything else to achieve what you want.

Ok so I’ve set the fixed height of all TD’s, looks not as good as it should, but well, limitations :/. Thanks for answer = ).

Just one thing, why wouldn’t you recreate your table with divs, if you really need that output to be like that ?

I have exactly 699 cells with input inside, it would be really pain in the ass to change it all to divs :P. Besides I’m just a front-end developer, somebody else takes back-end :).

You can set position:absolute to the input.

Tested on Firefox, Chrome and Edge, For Explorer, you should set a min-height to the input to make it at least usable.

UPDATE: For Dracco, here a Fiddle implementing your example.

First of all, it’s 2 years old question. Second of all, it’s been solved. Hardcoding the TD height is a way to go, though it’s not generic. As for position absolute: 1. Positioning table absolute will only be valid if it’s practically the only element on the page, or the rest is positioned absolutely as well (otherwise it will mess up the layout of the entire page. 2. Setting position of input as absolute means I have to set the TD as at least relative, and beside of that, it does not change a thing about the height. 3. Did you even consider IE as I mention in question?

I was specific saying it does not work on multi rows. After your recent change, it still does not work on Internet Explorer, inputs have height of 0.

The Fiddle I linked yesterday was already multi-row and functioning, but ok. For Explorer read my answer, I ‘ve given a workaround to make it (at least) usable.

Источник

How to set html select element css height to 100% in a table cell in IE?

I’d like to make a select (dropdown list) element fill out 100% of the table cell height. I was able to make it work in Firefox and Chrome but not on IE (Internet Explorer). Test HTML:

 
 
 
Some cell content 
Some cell content 
Some cell content 
 
 Select  
 
 
 

2 Answers 2

 
 
 
Some cell content 
Some cell content 
Some cell content 
 
 Select  
 
 

Nope, doesn’t work on IE (tested using IE11). I’d like to emphasize that on my question I’ve stated that this works on Firefox and Chrome. The problem is making this to work on IE.

The following snippet works fine here (IE8β2):

Hope so this might help you

I need this to be on an HTML5 doctype. I also noticed you changed the Test HTML code I’ve originally included in the question. I need it to work within a table cell element.

Hey dear i have made many changes in your code and you can use it in IE as i have already tested it, its working fine for me you can easily convert html typeto html5 doctype

Hey Moin, thanks for the effort but please read the question again. I’ve stated that the problem is making this to work inside a TABLE CELL (TD) using IE. If you can make this to work using the same Test HTML I’ve provided above, then I might consider you answer

Источник

How can an html element fill out 100% of the remaining screen height, using css only?

I want the header to be of fixed height and the content to fill up all the remaining height available on the screen, with overflow-y: scroll; . It this possible without Javascript?

16 Answers 16

forget all the answers, this line of CSS worked for me in 2 seconds :

1vh = 1% of browser screen height

For responsive layout scaling, you might want to use :

[update november 2018] As mentionned in the comments, using the min-height might avoid having issues on reponsive designs

[update april 2018] As mentioned in the comments, back in 2011 when the question was asked, not all browsers supported the viewport units. The other answers were the solutions back then — vmax is still not supported in IE, so this might not be the best solution for all yet.

This is the simplest answer, as you don’t need to set the height of all the parent elements to 100%. Here’s the current support for vh — caniuse.com/#feat=viewport-units — iOS apparently might need a workaround, as «vh on iOS is reported to include the height of the bottom toolbar in the height calculation».

When the question was asked in 2011, none of the major browsers supported viewport units. Those «over-complicated answers» were the only options back then.

Minor suggestion that a min-height: 100vh would be a lot better. It would scale for responsive designs as well.

This does not answer the question asked, this would take up 100% of the viewport. He does not want this becuase his header will take up x % of the viewport, as such the other answers are correct.

The trick to this is specifying 100% height on the html and body elements. Some browsers look to the parent elements (html, body) to calculate the height.

@Alex if this works for all the browsers you are targeting, then by all means go ahead and implement it. Everyone’s requirements are different.

Actually the best approach is this:

This solves everything for me and it helps me to control my footer and it can have the fixed footer no matter if page is being scrolled down.

Technical Solution — EDITED

Historically, ‘height’ is tricky thing to mold with, compared to ‘width’, the easiest. Since css focus on for styling to work. The code above — we gave and a height. This is where magic comes into picture — since we have ‘min-height’ on playing table, we are telling browser that is superior over because holds the min-height. This in turn, allows to override because had height already earlier. In other words, we are tricking browser to «bump» off the table, so we could style independently.

Источник

Why doesn’t height: 100% work to expand divs to the screen height?

I want the carousel DIV (s7) to expand to the height of the entire screen. I haven’t an idea as to why it’s not succeeding. To see the page you can go here.

* < padding: 0; margin: 0; >html, body, #fullheight < min-height: 100% !important; height: 100%; >#fullheight