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

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

我在输入元素上尝试了position absolute、top:0、bottom:0、left:0、right:0以将其拉伸到其父div的四个角。我尝试了height:100%、width:100%，但旋转使其无效

*{
填充：0；
保证金：0；
}
html，正文{
身高：100%；
宽度：100%；
}
div{
身高：100%；
宽度：20%；
背景：#111；
}
.场{
变换：旋转（-90度）；
背景：无；
边界：无；
大纲：无；
颜色：蓝色；
位置：绝对位置；
顶部：0；底部：0；左侧：0；右侧：0；
}

---

我试图满足您的需求。但是，它在代码段中不起作用

HTML

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

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后设置输入的位置和大小，这意味着在应用旋转之后。

我尝试满足您的场景。但是，它在代码段中不起作用

HTML

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

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后设置输入的位置和大小，这意味着在应用旋转之后。

基本上，仅使用CSS很难（如果不是不可能的话），因为无法确定宽度和高度

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

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

类似这样的内容（使用JQuery）

$（窗口）.on（“调整大小”，函数（）{
变量宽度=$（“div”）.height（）；
变量高度=$（“div”）.width（）；
$（“.field”）.css({
宽度：宽度，
高度：高度
});
}).resize（）
*{
填充：0；
保证金：0；
}
html，
身体{
身高：100%；
宽度：100%；
}
div{
身高：100%；
宽度：20%；
背景：绿色；
}
.场{
变换原点：左下角；
变换：translateY（-100%）旋转（90度）；
显示：块；
背景：粉红色；
边界：无；
大纲：无；
颜色：蓝色；
}
基本上，这对于CSS来说是相当困难的（如果不是不可能的话），因为宽度和高度无法确定

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

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

类似这样的内容（使用JQuery）


$（窗口）.on（“调整大小”，函数（）{
变量宽度=$（“div”）.height（）；
变量高度=$（“div”）.width（）；
$（“.field”）.css({
宽度：宽度，
高度：高度
});
}).resize（）
*{
填充：0；
保证金：0；
}
html，
身体{
身高：100%；
宽度：100%；
}
div{
身高：100%；
宽度：20%；
背景：绿色；
}
.场{
变换原点：左下角；
变换：translateY（-100%）旋转（90度）；
显示：块；
背景：粉红色；
边界：无；
大纲：无；
颜色：蓝色；
}

基本上我只想要一个可伸缩的边栏输入字段之类的东西。我要放一个按钮来缩回这个侧面的输入字段。像这样：。在“x”旁边，你的代码笔不起作用。它在我的本地HTML上工作，我想它的位置需要根据您的实现进行调整。基本上我只需要一个可伸缩的边栏输入字段之类的东西。我要放一个按钮来缩回这个侧面的输入字段。像这样：。在“x”旁边，你的代码笔不起作用。它在我的本地HTML上工作，我想它的位置需要根据您的实现进行调整。我想基本上制作一个可伸缩的输入字段。这是我的可伸缩导航条：。我想把输入字段放在“x”的旁边，你用
（window）.on（“resize”，function（）{…}）.resize（）做什么最后
.resize（）
做什么？我知道你需要在每次窗口更改时调整输入大小。它会在页面加载时立即调用resize函数……这意味着我只需要一个函数，而不是两个。这是我的JS代码，我不知道怎么回事：我想创建一个可伸缩的输入字段。这是我的可伸缩导航条：。我想把输入字段放在“x”的旁边，你用
（window）.on（“resize”，function（）{…}）.resize（）做什么最后
.resize（）
做什么？我知道你需要在每次窗口更改时调整输入的大小。它会在页面加载时立即调用resize函数…这意味着我只需要一个函数，而不是两个。这是我的JS代码，我不知道怎么了：