サイド入力バー全体に垂直入力を完全にフィットさせる方法は？

Question

htmlテキストの入力フィールドをオーバーラップを完了させたい/親divを組み込む。

入力要素にposition absolute、top：0、bottom：0、left：0、right：0を試して、親divの四隅に伸ばしてみました。私は高さを試しました：100％、幅：100％、回転はそれを役に立たなくします。

*{ 
 
    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

私はあなたのシナリオを満たすための試みを行いました。ただし、コードスニペットでは機能しません。

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; 
}); 

DOMがロードされた後のローテーションが適用された後の位置とサイズ

Answer 2

基本的にこれはかなり難しいです（不可能ではない場合）ただ CSSとして幅は&高さを決定することはできません。

回転は純粋に視覚的で、周囲の要素のレイアウトには影響しません。

親divに合わせて回転要素の高さと幅を設定することをお勧めします。

（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