Question

我希望html文本输入字段完成重叠/叠加其父div。

我在输入元素上尝试了绝对位置，顶部：0，底部：0，左：0，右：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作为宽度＆amp;高度无法确定。

旋转纯粹是视觉效果，不会影响周围元素的布局。

你需要JS，我建议，设置旋转元素的高度和宽度以适合父div。

像这样（使用JQuery）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Codepen Demo

如何使垂直输入完全适合整个侧面导航栏？

2 个答案: