In this article, we will look at how in CSS you can set the height of a block as a percentage of its width. Let's consider the use of this technology using the example of creating a Bootstrap carousel (slider) from images of different sizes.
Creating a block with a height that is a certain percentage of its width
- Create an HTML structure of 2 blocks:
The first block has 2 classes. Using the item-responsive class, we will set the block's relative positioning. This must be done so that block 2 (which will have absolute positioning) is located relative to it. In addition, this class is also used to add a pseudo-element:before before the content of the corresponding elements (item-responsive). This element will set the required block height relative to its width using the padding-top CSS property. The trick to this method is that if the padding property is set to not in pixels, but as a percentage, then it will be calculated by the browser relative to its width. This way you can get a block with the required height. The next step is to give block 2 an absolute position and align it with the first block.
- Add the following CSS code to the page: .item-responsive ( position: relative; /* relative positioning */ ) .item-responsive:before ( display: block; /* display the element as a block */ content: ""; /* content pseudo-element */ width: 100%; /* element width */ ) .item-16by9 ( padding-top: 56.25%; /* (9:16)*100% */ ) .item-responsive>.content ( position: absolute; /* absolute position of the element */ /* position of the element */ top: 0; left: 0; right: 0; bottom: 0; ) /* If necessary (for blocks that have these classes) */ .item -4by3 ( padding-top: 75%; /* (3:4)*100% */ ) .item-2by1 ( padding-top: 50%; /* (1:2)*100% */ ) .item -1by1 ( padding-top: 100%; /* (1:1)*100% */ )
Using the above technology to create a Bootstrap carousel
If you are not familiar with Bootstrap and want to know what it is, you can use the article Introduction to Bootstrap.
Let's look at an example in which we will use the above HTML structure and CSS code to display Bootstrap carousel slides.
We will use the following files as images:
- carousel_1.jpg (width = 736px, height = 552px, aspect ratio (height to width) = 1.33);
- carousel_2.jpg (width = 1155px, height = 1280px, aspect ratio (height to width) = 0.9);
- carousel_3.jpg (width = 1846px, height = 1028px, aspect ratio (height to width) = 1.8);
- carousel_4.jpg (width = 1140px, height = 550px, aspect ratio (height to width) = 2.07);
- carousel_5.jpg (width = 800px, height = 600px, aspect ratio (height to width) = 1.33);
We will set the images as the background. This will allow you to use 3 images with unequal aspect ratios in your Bootstrap carousel.
HTML markup of the carousel:
Carousel CSS code:
Item-responsive ( position: relative; /* relative positioning */ ) .item-responsive:before ( display: block; /* display the element as a block */ content: ""; /* pseudo-element content */ width: 100%; /* element width */ ) .item-16by9 ( padding-top: 56.25%; /* (9:16)*100% */ ) .item-responsive>.content ( position: absolute; /* absolute position of the element * / /* element position */ top: 0; left: 0; right: 0; bottom: 0; background-size: cover !important; )
In order for an object to be given a specific width and height, there are two properties in CSS - width and height (respectively). With their help, you can set fixed sizes for elements, be it a sidebar, image, table or any block.
Features of calculating width and height
You can use any length unit in CSS to define the width or height of an object. Pixels are the easiest to understand. If you use percentage notation, keep in mind that the width of the object will depend on the width of its parent. If there is none, then the width of the element is calculated based on the width of the browser window (if the user changes the window width, the width value will be recalculated).
You can also use the em unit as the width value, which is approximately the same as the text font size, but only in conventional units. For example, you set the font size to 24px. Then 1em for this element will be equal to 24px, and if you set width: 2em then the width will be 2x24px = 48 pixels. If the font size is not set, it will be inherited.
Height, specified as a percentage, is calculated in the same way as width, but the calculation is based on the height of the parent element rather than its width. If there is no parent, the height will depend on the height of the browser window.
The percentage width and height of the child element are calculated based on the dimensions of the parent
What is included in width and height
It’s worth remembering right away that the width and height properties have a peculiarity - they do not include the values of margin , padding and border . The value you set for width/height will only indicate the width/height of the element's content area.
So, in order to calculate, for example, the actual width of an element (the space it will actually occupy on the screen), a little arithmetic is required. The actual width is the sum of values such as width , padding , border and margin . Recall that we previously looked at what the CSS box model looks like.
To consolidate knowledge, we will show an example. Let's say you have an element with this style:
Width: 200px; margin-left: 15px; margin-right: 15px; padding-left: 10px; border-left: 3px solid #333;
To calculate the actual width of the element, perform the addition:
width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (actual width)
The height property can be useful if you need to precisely control, for example, the height of an image. However, if the container will contain text or any other content that may vary in height, it is highly not recommended to set a fixed height for the container, since such a layout can lead to an unexpected result - the content will be displayed on top of other content.
Instead of a fixed height, use height: auto - this entry means that the height of the object will be calculated automatically, depending on the content it contains.
Another way to avoid layout collapse is to use the overflow: auto notation. In this case, if the height of the content exceeds the height of its container, the browser will add a scrollbar to the container.
In the next lesson you will learn how you can override the width of an element using an interesting and very useful property
Description
Sets the height of block-level or replaceable elements (for example, the tag ). Height does not include the thickness of the borders around the element, padding, or margins.
If the block's content exceeds the specified height, the element's height will remain unchanged and the content will be displayed on top of it. Because of this feature, the contents of elements may overlap when the elements in the HTML code appear sequentially. To prevent this from happening, add overflow : auto to the element's style.
Syntax
height: value | interest | auto | inherit
Values
Any length units accepted in CSS are accepted as values - for example, pixels (px), inches (in), points (pt), etc. When using percentage notation, the height of the element is calculated depending on the height of the parent element. If the parent is not explicitly specified, then the browser window acts as it. auto sets the height based on the element's content
HTML5 CSS2.1 IE Cr Op Sa Fx
The result of this example is shown in Fig. 1.
Rice. 1. Applying the height property
Object Model
document.getElementById("elementID ").style.height
Browsers
Internet Explorer 6 incorrectly defines height as min-height .
In quirk mode, Internet Explorer versions up to and including 8.0 incorrectly calculate the height of an element without adding padding, margin, or border values to it.
Internet Explorer versions up to and including 7.0 do not support the inherit value.
The height CSS property specifies the height of an element. By default, the property defines the height of the content area . If box-sizing is set to border-box , however, it instead determines the height of the border area .
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The min-height and max-height properties override height .
Syntax
/* Keyword value */ height: auto; /*Values
CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.">Formal syntax
Example
HTML
CSS
div ( width: 250px; margin-bottom: 5px; border: 2px solid blue; ) #taller ( height: 50px; ) #shorter ( height: 25px; ) #parent ( height: 100px; ) #child ( height: 50% ; width: 75%; )Result
Accessibility concerns
Ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to increase text size.
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 4 |
Editor's Draft | |
| CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of "height" in that specification. |
Working Draft | Added the max-content , min-content , fit-content keywords. |
| CSS Transitions The definition of "height" in that specification. |
Working Draft | Lists height as animatable. |
| CSS Level 2 (Revision 1) The definition of "height" in that specification. |
Recommendation | Adds support for the CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
| CSS Level 1 The definition of "height" in that specification. |
Recommendation | Initial definition. |
| Initial value | auto |
|---|---|
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
| Percentages | The percentage is calculated with respect to the height of the generated box"s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto . A percentage height on the root element is relative to the initial containing block. |
| Media | visual |
| Computed value | a percentage or auto or the absolute length |
| Animation type | a CSS data type are interpolated as real, floating-point numbers.">length , CSS data type are interpolated as real, floating-point numbers.">percentage or calc(); |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
| height | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
| fit-content | Chrome Full support 46 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 33 | Safari Full support 11 Full support 11 Full support 9 Prefixed Prefixed | Opera Android? | Safari iOS Full support 11 Full support 11 Full support 9 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | ||||
| max-content | Chrome Full support 46 | Edge No support No | Prefixed Prefixed | IE No support No | Opera Full support 44 | Safari Full support 11 | WebView Android Full support 46 | Chrome Android Full support 46 | Prefixed Prefixed Implemented with the vendor prefix: -moz- | Samsung Internet Android Full support 5.0 | ||
| min-content | Chrome Full support 46 | Edge No support No | Firefox Full support 66 Full support 66 Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -moz- | IE No support No | Opera Full support 44 | Safari Full support 11 | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android Full support 66 Full support 66 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -moz- | Opera Android Full support 43 | Safari iOS Full support 11 | Samsung Internet Android Full support 5.0 |
| stretch | Chrome Full support 28 Webkit-fill-available">Alternate Name Full support 28Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name | Edge No support No | Firefox No support No | IE No support No | Opera Full support 15 Webkit-fill-available">Alternate Name Full support 15Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available | Safari Full support 9 Webkit-fill-available">Alternate Name Full support 9Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available | WebView Android Full support 4.4 Webkit-fill-available">Alternate Name Full support 4.4Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available | Chrome Android Full support 28 Webkit-fill-available">Alternate Name Full support 28Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available | Firefox Android No support No | Opera Android? | Safari iOS Full support 9 Webkit-fill-available">Alternate Name Full support 9Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available | Samsung Internet Android Full support 5.0 Webkit-fill-available">Alternate Name Full support 5.0Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available |
Legend
Full support Full support No support No support Compatibility unknown Compatibility unknown Uses a non-standard name. Uses a non-standard name. Requires a vendor prefix or different name for use. Requires a vendor prefix or different name for use.Element height and width are calculated quantities. Each element of a web page forms a rectangular area, which in turn consists of several areas - content areas, padding areas, frame areas And field areas element.
Between the element's content and its border are indentation padding, outside the element's border - fields margin . A content area exists for every element; other areas are optional.
Rice. 1. Block model of an element 1. Element height
The height property specifies the height of the block element's content and has no effect on inline elements display: inline; . The height of inline elements is equal to the height of their content. Negative values are not allowed. The property is not inherited.
Syntax
P (height: 100px;)
2. Element width
The width property specifies the width of the block element's content and has no effect on inline elements display: inline; . The width of inline elements is equal to the width of their content. Negative values are not allowed. The property is not inherited.
Syntax
P (width: 100px;)
3. Height and width of an absolutely positioned element
Set the width and height of an absolutely positioned element position: absolute; not always necessary, since in this case the height and width are implicitly determined by the offset of the element. If an element has borders and margins specified, they reduce the size of the content area by the appropriate values.
Div ( background: #6A7690; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; ) /*in this case, the height of the element is 100%, the width is 50% of the parent block*/ 
Rice. 2. Height and width of an absolutely positioned element
4. Element padding
Using the padding property, you can set padding simultaneously for several sides of an element in the following order: . If the element has a background, it will apply to the padding as well. Negative values are not allowed. The property is not inherited.
If three values are given, for example, div (padding: 10px 20px 30px;), then they will be distributed in the following order: the first value is the top padding, the second is the right and left padding, the third is the bottom padding.
If two values are given, for example, div (padding: 10px 20px;), then the first will set the top and bottom padding, the second will set the right and left.
A single value, such as div (padding: 10px;) , will set the same padding on all sides of the element.
Syntax
P (padding: 5px 10px 15px 10px;)
4.1. Padding on one side of an element
To set padding on only one side of an element, you need to use one of the properties padding-top , padding-right , padding-bottom , padding-left , for example:
P (padding-left: 10px;)
5. Element Margins
Most elements are separated from each other by margins. The margin property is a short form for recording the fields of an element in the following order: top, right, bottom, left. Used when you need to set margins on several sides, but not necessarily on four. Vertically adjacent margins of block elements are collapsed, and top and bottom margins have no effect on inline elements. Negative values are allowed. The property is not inherited.
If three values are given, for example, div (margin: 10px 20px 30px;), then they will be distributed in the following order: the first value is the top margin, the second is the right and left margin, the third is the bottom margin.
If two values are given, for example, div (margin: 10px 20px;), then the first will set the top and bottom margins, the second will set the right and left.
A single value, such as div (margin: 10px;) , will set equal margins on all sides of the element.
(margin: 0 auto;) will only work if the element's width is specified explicitly.
Rice. 3. margin: auto; for an absolutely positioned element Syntax
Div (margin: 5px 10px 2px 5px;)
5.1. Margins on one side of the element
The properties margin-top , margin-right , margin-bottom , margin-left control the corresponding margins on each side of the element, for example:
P (margin-left: 10px;)
6. Width and height limitation
CSS also supports several other properties related to setting the height and width of web page elements: min-height, min-width, max-height and max-width. These properties allow you to set the minimum and maximum values for an element's width or height, giving the element the ability to fill the available space. Properties are often used for responsive web page design. Applies to all elements except inline and table elements. They always come after the main rule, i.e. after giving the element height or width . Not inherited.
You can specify regular dimensions using some units of measurement, and size restrictions using other units, for example:
Div ( width: 400px; max-width: 50%; )
The element will only have a width of 400px if this value does not exceed 50% of the width of the container block, otherwise its width will be reduced.