Defining the relative vertical height of an element

Last update on February 28, 2009 11:08 AM by deri58
Published by deri58

Defining the relative vertical height of an element






Sometimes we want to define a vertical height of an element.
It is simple, using fixed values (not pixels), but it's more complicated when using relative heights (percentage).

This problem is often encountered when using background images to create a border with a certain style to an element.

Solution

To set a vertical height on an item, it is necessary that every parent element have a defined height too.

We must define a height tags to html, body, and all tags containing the element must have a certain height.

This gives for example:

html,body,div#body,div#all_my_elements{height:100%}
Best answers for « Defining the relative vertical height of an element » in :
Units in style sheets (CSS) Show Units With style sheets, you can use numeric values to set style properties in multiple ways: absolutely, meaning in units which are independent of the form of output (such as in centimetres); relatively, meaning in units relative to an element....
[Javascript]Knowing the height of an HTML element Show [Javascript]Knowing the height of an HTML element To determine the height of a HTML block using JavaScript, independently from the type browsers used, there are two methods: element.offsetHeight...
Modifying the height of element HTML ShowModifying the height of element HTML The style property “height” can be used to modify the height of an html element in javascript. For this you can refer to the following: Below is an indication of how to do this...
Concatenate vectors or matrices under Matlab ShowConcatenate vectors or matrices under Matlab Horizontal concatenation Vertical concatenation Further calculations Concatenation of variables Matlab is define as the combination these variables in a single (vector or matrix)....
Centering vertically a web page ShowCentering vertically a web page e .js file e .html file Centering vertically a web page; consider it as a waste time trying to achieve it with CSS. The most practical solution is to use JavaScript. e .js file Copy/paste the...
Download Drivers Realtek High Definition Audio for 2000/XP ShowDescription Designed by RealTek Drivers Groups, the application is well known worldwide also. Very powerful to use, Driver Realtek High Definition Audio is an application that will allow you to have the best sound on your computer....
Declaring a style sheet (CSS) ShowDeclaring a style sheet Style sheets are not directly integrated into the W3C's HTML recommendations. For this reason, you need to include elements in the HTML code indicating both the type of document, meaning the version of the HTML and CSS...
CSS - Style sheets ShowFont properties Property Value Description font-family Specific font (Arial, Times, Verdana) Familly (serif, sans-serif, fantasy, monospace, cursive) Defines one or more font names or font families. If multiple fonts are defined,...