CSS3 User Interface: Resize Height

The following example lets the user resize only the height of a <div> element:

HTML file: Displayed by browser:
<style>
div {
    border: 2px solid;
    padding: 20px;
    width: 300px;
    resize: vertical;
    overflow: auto;
}
</style>
<body>
<div>Let the user resize the height of this div element.</div>
</body>
Let the user resize the height of this div element.

Resize works in Chrome, Firefox, Safari and Opera. Internet Explorer does not support the resize property because they have deprecated this property.

Back button Table of Contents Next button