How to make vertical input fit entirely into the whole side navigation bar?

Question

I want the html text input field to complete overlap/imbricate its parent div.

I tried position absolute, top:0, bottom:0, left:0, right:0 on the input element to stretch it to the four corners of its parent div. I tried height:100%,width:100%, but the rotation makes it useless.

 *{ padding:0; margin:0; } html,body{ height:100%; width:100%; } div{ height:100%; width:20%; background:#111; } .field{ transform: rotate(-90deg); background: none; border: none; outline: none; color:blue; position:absolute; top:0;bottom:0;left:0;right:0; } 

 <div> <input class='field' type='text' placeholder='Enter zipcode'> </div> 

Answer 1

I made an attempt to meet your scenario. It does not work in code snippet, however.

HTML

<div id="container">
    <input id="textbox-element" class='field' type='text' placeholder='Enter zipcode'>
</div> 

CSS

*{
    padding:0;
    margin:0;
}

html,body{
    height:100%;
    width:100%;
}

div{
    height:100%;
    width:20%;
    background:#111;
}

.field{
    transform: rotate(-90deg);
    transform-origin: top left;
    background: none;
    border: none;
    outline: none;
    color:blue;
    position:absolute;
}

Javascript

document.addEventListener("DOMContentLoaded", function(event) { 
    var dimensions = document.querySelector("#container").getBoundingClientRect();
    var element = document.querySelector("#textbox-element");
    element.style.bottom = -dimensions.width;
    element.style.width = dimensions.height;
    element.style.height = dimensions.width;
});

What I'm doing here is to set the input's position and size after the DOM is loaded, meaning after the rotation is applied.

Answer 2

Basically this is quite hard (if not impossible) with just CSS as the width & height cannot be determined.

The rotation is purely visual and does not affect the layout of elements around it.

You'd need JS, I'd suggest, to set the height and width of the rotated element to fit the parent div.

Something like this (using JQuery)

 $(window).on("resize", function() { var width = $("div").height(); var height = $("div").width(); $(".field").css({ width: width, height: height }); }).resize(); 

 * { padding: 0; margin: 0; } html, body { height: 100%; width: 100%; } div { height: 100%; width: 20%; background: green; } .field { transform-origin: bottom left; transform: translateY(-100%) rotate(90deg); display: block; background: pink; border: none; outline: none; color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input class='field' type='text' placeholder='Enter zipcode' /> </div> 

Codepen Demo