DIV height in percentage based on font size in percentage

HTML & CSS
1

Hi all,

A question which I need to understand, hope its get cleared here. After searching alot on google I still not able get relevant answer or understand it.

Basically to design a page with percentage values its said that keep the default font size in precentage as 100%.

Here starts the problem.
Keeping body font-size to 16px. Place a div inside body and set its height to 16px. Its exactly occupy the height of font-size.

So If I keep now font-size to 100%, What will be the div height in percentage so that it exactly fits the text ?

I understand by using javascript make the font size smaller to fit inside its div or such terms. But in simple terms I got merely confused on this question.

If I use px as my unit, I keep my font-size to 16px and div size to 16px which fits exactly to its text. So what will be the height in percentage if font-size is 100% ?

Hope to get some light on this issue by all of members here.
:mad:

2

Here starts the problem.
Keeping body font-size to 16px. Place a div inside body and set its height to 16px. Its exactly occupy the height of font-size.

So If I keep now font-size to 100%, What will be the div height in percentage so that it exactly fits the text ?

That’s a bit of a mixed question as the two things are somewhat unrelated.

The height of the line of an inline element is created by its font size plus half-leading which is added to the top and bottom of the font and also depends on the line-height that has been set. Generally if you want a div to wrap text nicely then you would just set the line-height: to 1.0 but of course there will still be space above and below the text (half-leading) to allow room for descenders and ascenders.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p {
	margin:0;
	line-height:1.0;
	border:1px solid red;
	float:left;
}
</style>
</head>

<body>
<p>Testing some text</p>
</body>
</html>

The exact position of the line around the text may depend on the font glyphs themselves and will vary from system to system.

So in answer to your question you don’t need to know what height the text is to create a border around it. Which is what you want because you never know what font-size a user may have selected and if you make a div 16px height but a user sets fonts to 20px then your design will break.

3

Hi paul,

Thanks for the reply,
Yes I can get that my question is mixed and somewhat unrelated because pixels and percentages behave differently.

But I just want to figure out what if I keep my pages font persistent and I have to adjust the page by height to that it fits to body.

<!DOCTYPE HTML>
<html>
<head>
<style>
html{
       font-family:verdana;
       font-size:16px;
}
body{
      font-size:100%;
      margin:0px;
      padding:0px;
      width:100%;
      height:100%;
      position:relative;
}
</style>
</head>
<body>

<div style="position:relative;width:100%;height: ? %">
<!-- What height to be set in % for this div so that it will give the effect of below div  or its text must not overflow or cropped inside -->
This is demo text
</div>

<div style="position:relative; width:100%; height:16px;">
<!-- In this case this div is always fit for its text in any resolution -->
This is demo text
</div>
    |
    |
    <!--more div's which fits exactly to height of body 100%-->
   |
   |
</body>
</html>

I don’t want to make the window.resize as I am focusing only on fullscreen window for one time page load.
My problem is similar to as you mentioned about design break, but here if I keep some percentage value then the text inside it will be cropped inside div.

Thanks again to you.

4

Hi,

I am still a little unclear on what you are trying to do here:)

In your example you state that the div with height:16px will fit its text but in fact that is the div that will break should a user have selected different sized text to the one that you think they may be using (you ultimately have no control over what size text a user will use). Then on the other hand the div without a height is the one that will work in al situations and will not crop or allow text to overflow.

You seem to have this completely the wrong way around.:slight_smile:

It is also bad practice to set the body font-height to 16px because that also goes against user preferences. Just leave it at whatever default it maybe and let your design accommodate accordingly.

Your other question about creating a page that just fits the viewport is also illogical unless its a very simple gallery site with virtually no text. It’s easy enough to make a div fill the viewport but the problem is that your content may not fit into the viewport of the device that is accessing your page.

It sounds to me as though you want a page that just fills the viewport and you want the text to scale smaller and larger depending on the viewport size but this is a flawed approach and not one used in professional web design.

You can scale he text using the new vh units but you often end up with text too small to read at smaller sizes.

e.g.(Modern browsers only)


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
	height:100%
}
p {
	margin:0 0 1em;
	font-size:2.5vmin
}
</style>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum facilisis urna non efficitur. Maecenas augue nisi, tristique quis volutpat non, pulvinar et neque. Duis ut auctor ligula, id efficitur lectus. Nulla sed ultrices lorem. Maecenas hendrerit vehicula nisl, in posuere lacus tincidunt non. Praesent odio magna, vulputate vitae lobortis ut, euismod nec augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis tortor interdum, accumsan lacus vitae, interdum nibh. Pellentesque sed congue ipsum. Nunc sit amet lacinia nisi. Curabitur commodo nec lectus in vehicula. Fusce congue suscipit placerat. In at ultricies quam, ac condimentum elit. Donec orci lacus, gravida sed tellus eu, aliquet vulputate orci. Nulla eleifend pharetra dui, eleifend mollis nunc fringilla non</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum facilisis urna non efficitur. Maecenas augue nisi, tristique quis volutpat non, pulvinar et neque. Duis ut auctor ligula, id efficitur lectus. Nulla sed ultrices lorem. Maecenas hendrerit vehicula nisl, in posuere lacus tincidunt non. Praesent odio magna, vulputate vitae lobortis ut, euismod nec augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis tortor interdum, accumsan lacus vitae, interdum nibh. Pellentesque sed congue ipsum. Nunc sit amet lacinia nisi. Curabitur commodo nec lectus in vehicula. Fusce congue suscipit placerat. In at ultricies quam, ac condimentum elit. Donec orci lacus, gravida sed tellus eu, aliquet vulputate orci. Nulla eleifend pharetra dui, eleifend mollis nunc fringilla non</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum facilisis urna non efficitur. Maecenas augue nisi, tristique quis volutpat non, pulvinar et neque. Duis ut auctor ligula, id efficitur lectus. Nulla sed ultrices lorem. Maecenas hendrerit vehicula nisl, in posuere lacus tincidunt non. Praesent odio magna, vulputate vitae lobortis ut, euismod nec augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis tortor interdum, accumsan lacus vitae, interdum nibh. Pellentesque sed congue ipsum. Nunc sit amet lacinia nisi. Curabitur commodo nec lectus in vehicula. Fusce congue suscipit placerat. In at ultricies quam, ac condimentum elit. Donec orci lacus, gravida sed tellus eu, aliquet vulputate orci. Nulla eleifend pharetra dui, eleifend mollis nunc fringilla non</p>

</body>
</html>

It’s not an approach I like although it could be tidied up with media queries.