How to set margin,height,width and numeric property based on window size?

[vngx]

Hi

I am new in web development(I am an Android developer).suppose I want to assign a div margin-top 18% of total height of window size.How can I do this

div{
margin-top:available window size -my percentage of available window size;
}

is it possible in css?

[ralphm]

In modern CSS, you can easily do margin-top: 18vh;.

[vngx]

when I run this code

Edit fiddle - JSFiddle - Code Playground

see when browser width decrease text size in button is not changing

[PaulOB]

@vngx

see when browser width decrease text size in button is not changing

Is this a different question to the one you asked Ralph?

You were talking about margin-top?

You seem to have mistyped a value here:

.logintable{
	width:30%;
	height:30v%;
}

Did you mean 30vh ?

Regarding the button then you have set too small a height (and width) on it to contain the text. You don’t actually set any font-size on the text anyway so you will have no control over it. Avoid fixed heights on elements as that never works unless its an image or something unchanging (not anything that holds text). The button realy should adapt to its content so you don’t really want a width on it either but control its size by content + padding etc.

I think you need to rethink your approach as your margins and percentages are not maintainable in a real design. there are better ways to create centred content without all the magic numbers (display:table or flexbox approaches).

As for controlling text size then usually you do this with media queries and tweak the font size as the screen gets smaller or wider but generally as you get to small screen you don’t actually want smaller text because it is hard to see 13px text on a mobile but easier on a desktop. Therefore infinitely scaling text up and down would be a bad approach.