☰

Resizeable using CSS

pageid = 4790 parentid = 7708

 

  ↵

This demonstration shows how three divs can be resized using simple CSS, and each also responds to changes in the other divs. The top div is set to resize vertically and the left hand div to resize horizontally.

Resize can be horizontal, vertical or can be set to both.

The button to resize the divs is rather small and easily overlooked.

Drag the corners and observe how the divs respond.

 

 

..

The HTML code:

There is nothing special about the HTML code. The ability to resize a div is set in the CSS.

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Resizable</title>
 
    <link rel="stylesheet" href="resizeable.css">
 
</head>
 
<body>
    <div id="parent">
        <div id="topmenu">
            <h1>CSS Resizeable</h1>
            <p>This is the top menu. Drag the bottom border of this pane.</p>
            <p>This is the top menu</p>
            <p>This is the top menu</p>
        </div>
 
 
        <div id="div1">
            <div class="content">
                <p>This is text in the left hand pane. Drag the right hand border of this pane.</p>
                <p>This is text in the left hand pane</p>
                <p>This is text in the left hand pane</p>
            </div>
        </div>
        <div id="div2">
            <div class="content">
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
            </div>
        </div>
    </div>
 
</body>

The CSS code:

Significant aspect for resize with CSS are highlighted in the CSS code below.

The initial values from the CSS for the size and position of each div are used when the page is first displayed.

#parent {
    position: absolute;
    height: 100vh;
    margin: 0;
    padding: 0;
    width: 98%;
}
 
#div1 {
    position: relative;
    display: block;
    float: left;
    width: 50%;
    background-color: #A2A;
    overflow: auto;
    resize: horizontal;
}
 
#div2 {
    display: block;
    background-color: #BBB;
    overflow: auto;
}
 
#topmenu {
    position: relative;
    width: 100%;
    height: calc(98vh /8);
    overflow: auto;
    resize: vertical;
}
 
body {
    overflow: hidden;
}
 
html {
    overflow: hidden;
}