Css resizable div height

resize

В resize CSS наборы свойств ли элемент изменяемый, и если да, то в каком направление.

Try it

resize не применяется к следующему:

Syntax

/ * Значения ключевых слов * / resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; / * Глобальные значения * / resize: inherit; resize: initial; resize: revert; resize: revert-layer; resize: unset;

Свойство resize указывается как одно значение ключевого слова из списка ниже.

Values

Элемент не предлагает никакого управляемого пользователем способа его изменения.

Элемент отображает механизм,позволяющий пользователю изменять его размер,который может быть изменен как по горизонтали,так и по вертикали.

Элемент отображает механизм, позволяющий пользователю изменять его размер в горизонтальном направлении.

Элемент отображает механизм, позволяющий пользователю изменять его размер в вертикальном направлении.

Элемент отображает механизм, позволяющий пользователю изменять его размер в направлении блока (по горизонтали или по вертикали, в зависимости от writing-mode и значения direction ).

Элемент отображает механизм, позволяющий пользователю изменять его размер во встроенном направлении (по горизонтали или по вертикали, в зависимости от writing-mode и значения direction ).

Formal definition

Initial value	none
Applies to	элементы с overflow отличным от visible , и при необходимости замененные элементы, представляющие изображения или видео, а также iframes
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

resize = none | both | horizontal | vertical | block | inline

Examples

Отключение возможности изменения размера текстуры

HTML

textarea>Type some text here.textarea>

CSS

textarea < resize: none; / * Отключает возможность изменения размера * / >

Result

Использование изменения размера с произвольными элементами

Вы можете использовать свойство resize для изменения размера любого элемента. В приведенном ниже примере изменяемый размер содержит изменяемый абзац ( элемент ).

HTML

class="resizable"> 
class="resizable"> This paragraph is resizable in all directions, because the CSS `resize` property is set to `both` on this element.
 
 

CSS

.resizable < resize: both; overflow: scroll; border: 1px solid black; > div < height: 300px; width: 300px; > p < height: 200px; width: 200px; >

Result

Specifications

Источник

Making divs user resizable with CSS

This article has nothing to do with browser widths and viewport media queries.

In this article, we will be talking about the resize css property.

This is one property I only came across recently, because when do you actually need the user to resize something other than a textarea box.

In my article demonstrating how the HTML tag works, I used the resize property to showcase when the words would break.

You might find yourself in need of this one-day, so here we go, an example of how the CSS resize property works and what options it has.

The end result will look like the following GIF.

CSS resize property permalink

To add the option we can use the following syntax:

• none : Default, user cannot resize the element
• both : Resize horizontal and vertical
• horizontal : Only resize horizontally
• vertical : Only resize vertically
• initial : Reset back to the initial value
• inherit : Inherit value from the parent element

To make them effective, let’s create some examples:

What’s really important to know is that by default, the resize code will not do anything.

This is because the default overflow value is visible, and that will disable the resize.

We can use any of these overflow values: scroll , auto , hidden .

First let’s define a basic box to start with:

div  width: 100px; height: 100px; overflow: auto; >

Now let’s make a pink box that can resize both ways:

div.both  resize: both; background: #ef476f; >

Perhaps we only want a horizontal resize? Check out the yellow box.

div.horizontal  resize: horizontal; background: #ffd166; >

Over even just vertical, check out the green box

div.vertical  resize: vertical; background: #06d6a0; >

You can see these boxes in action on the following Codepen.

CSS Removing resize attribute permalink

There is one case where perhaps you want to remove the resize attribute, and this is with textareas.

They come with a default resize property, and we can turn this off by using the following code:

You can try this out on the following Codepen.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Источник

resize

The resize CSS property sets whether an element is resizable, and if so, in which directions.

Try it

resize does not apply to the following:

Syntax

/* Keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* Global values */ resize: inherit; resize: initial; resize: revert; resize: revert-layer; resize: unset; 

The resize property is specified as a single keyword value from the list below.

Values

The element offers no user-controllable method for resizing it.

The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.

The element displays a mechanism for allowing the user to resize it in the horizontal direction.

The element displays a mechanism for allowing the user to resize it in the vertical direction.

The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).

The element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).

Formal definition

Initial value	none
Applies to	elements with overflow other than visible , and optionally replaced elements representing images or videos, and iframes
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

resize =
none |
both |
horizontal |
vertical |
block |
inline

Источник

CSS resize Property

Here, the user can resize both the height and width of a element:

More «Try it Yourself» examples below.

Definition and Usage

The resize property defines if (and how) an element is resizable by the user.

Note: The resize property does not apply to inline elements or to block elements where overflow=»visible». So, make sure that overflow is set to «scroll», «auto», or «hidden».

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.resize=»both» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -moz- specify the first version that worked with a prefix.

CSS Syntax

Property Values

Value	Description	Demo
none	Default value. The user cannot resize the element	Play it »
both	The user can resize both the height and width of the element	Play it »
horizontal	The user can resize the width of the element	Play it »
vertical	The user can resize the height of the element	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Let the user resize only the height of a element:

Example

Let the user resize only the width of a element:

Example

In many browsers, is resizable by default. Here, we have used the resize property to disable the resizability:

Источник

Resizing Website Elements With CSS Resize Property

You must have noticed some website elements getting resized by dragging their bottom right corner. You can also control how an element gets resized using resize property. This property specifies if an element can be resized by the user. It also specifies the axis of its resizability.

The most common application of this property is to disable or change the resizing behaviour of textarea. This is also used when you have to write a long post in a textarea or a div and don’t want it to occupy a large space in your webpage.

The resize property takes the following values.

Values

none : User cannot resize the element.

horizontal : User can resize the width of the element.

vertical : User can resize the height of the element.

both : User can resize both the width and the height of the element.

initial : Sets the property to its default value.

inherit : The element inherits the resize value of its parent.

These are the values which decide the way elements are resized. Before moving to the examples, have a look at some related points worth noting.

Important Points

• While the default value of the resize property is none for most of the elements, that of textarea is both in most of the browsers.
• The values other than none of the resize property are only effective if the overflow property is set a value other than visible .
• You can control the maximum width and height of an element that can be resized using the max-width and max-height property. Similarly, you can also control the minimum width and height using the min-width and the min-height property.
• You cannot resize a textarea smaller than its original size in Webkit based browsers.

If an element is resizable, then you will see a small draggable handle on its bottom right or bottom left corner, it is bottom right in most of the cases.

See the Pen CSS resize by Aakhya Singh (@aakhya) on CodePen.

The first div has the default resize value none and thus cannot be resized. The second and the third div can be resized by the width and the height respectively. The last one can be resized by both its width and height.

Now go to another example where an element does not have its default value none .

Both the width and the height of textarea are resizable by default. You can remove the dragable handle from its bottom right corner by giving display: none , or can make it resizable by only its width or height by giving it resize: horizontal or resize: vertical .

You can control the extent to which the elements can be resized. This can be done by giving constraints using the min-width and the max-width properties for the width and the min-height and the max-height properties for the height as shown in the following example.

The normal height of the first div is 100px. In Webkit browsers, its width can be expanded upto 200px but cannot be reduced. In Firefox, its width can be expanded till 200px and reduced till 50px. The same is true for the second div.

Browser Support

This property is not supported by IE, Edge, iOS Safari and Opera Mini.

Источник