Javascript 如何防止JS使我的div容器变形？

不知何故，当我尝试使用JS显示隐藏内容（单击登录按钮时的登录公式）时，我的公式会变形。尤其是“注册”按钮太长，我无法正确定位我的问题。 当我删除JS和#login fenster中的display:none属性时，它会按照我的意愿显示出来。我已经尝试将必要的代码复制到JSFIDLE，我希望它能起作用。到目前为止，我还没有任何关于响应性设计的线索，所以我认为你必须最大化输出窗口。对不起

我已经删除了代码的不同部分，并试图找到问题所在，但只找到了与JS的连接

函数myFunction（）{
var x=document.getElementById（“login-fenster”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

主体，主体{
背景色：#000000；
溢出x：隐藏；
}
导航{
背景：#0d0d；
宽度：100vw；
排名：0；
}
.导航{
显示器：flex；
证明内容：柔性端；
列表样式：无；
高度：3vw；
文本对齐：居中；
对齐项目：居中；
填充：0 2vw 0；
}
导航ul{
填充：0px；
保证金：0；
右：0；
}
海军ulli a{
颜色：#fff；
背景色：#262626；
文字装饰：无；
填充：12px；
字号：1.2rem；
右边填充：10px；
边界半径：5px 5px；
边框：262626 1px实心；
过渡：0.5s；
过渡：背景1s轻松输入输出；
} 
导航ulli a：悬停{
颜色：#ffffff；
文字装饰：无；
字号：100；
背景：线性梯度（#262626，#5959）；
}
导航按钮{
颜色：#fff；
背景色：#262626；
文字装饰：无；
填充：12px；
字号：1.1rem；
右边填充：10px；
边界半径：5px 5px；
边框：262626 1px实心；
过渡：0.5s；
过渡：背景1s轻松输入输出；
}
#登录{
右边距：1rem；
转换：转换0.1s轻松输入输出；
}
#登录：活动{
变换：比例（0.9）；
}
.新闻{
右边距：1rem；
转换：转换0.1s轻松输入输出；
}
.新闻：活跃{
变换：比例（0.9）；
}
.测试{
右边距：1rem；
转换：转换0.1s轻松输入输出；
}
.测试：活动{
变换：比例（0.9）；
}
.社区{
右边距：1rem；
转换：转换0.1s轻松输入输出；
}   
.社区：活跃{
变换：比例（0.9）；
}
.索引{
右边距：1rem；
转换：转换0.1s轻松输入输出；
}
.索引：悬停{
变换：比例（0.9）；
}
.搜索{
右边距：1rem；
}
#登入芬斯特{
右：0；
边缘顶部：0rem；
保证金权利：19rem；
z指数：100；
证明内容：中心；
对齐内容：居中对齐；
对齐项目：居中；
显示：内联flex；
弯曲方向：立柱；
高度：30vh；
宽度：18vw；
背景色：黑色；
颜色：白色；
位置：绝对位置；
边框：3倍纯白；
边界半径：20px 20px；
}
.登入表格{
边缘顶部：10px；
}
#登录fenster输入[type=“text”]{
字体大小：1.3rem；
边界半径：8px 8px；
}
#登录输入[type=“password”]{
字体大小：1.3rem；
边界半径：8px 8px；
}
.登记{
边缘顶部：10px；
背景：#262626；
边框：1px纯白；
边界半径：15px 15px；
转换：转换所有0.2秒；
}
.登记{
文字装饰：无；
颜色：白色；
字体大小：1.3rem；
转换：转换所有0.2秒；
}
.注册：活动{
变换：比例（0.95）；
}
钮扣{
光标：指针；
颜色：白色；
背景色：#262626；
填充：0.5雷姆；
边界半径：15px 15px；
边框：1px纯白；
字号：1rem；
转变：转变0.2s；
}
按钮：激活{
变换：比例（0.95）；
}

库普布德

登录





登录
布利本酒店
帕斯沃特·维杰森？
函数myFunction（）{
var x=document.getElementById（“login-fenster”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

谢谢你的JSFIDLE——尽管我对你希望实现的目标仍有点困惑。据我所知，您的问题更多的是CSS问题，而不是JavaScript问题。如果您的问题是白色边框穿透了您的内容：

然后移除

#login-fenster {
    ...etc...
    height: 30vh;     <----- Remove this to keep everything inside regarding Y-Axis
    width: 18vw;      <----- Remove this to keep everything inside regarding X-Axis
    ...etc...
}

---

感谢您的支持，尽管我对您希望实现的目标仍有点困惑。据我所知，您的问题更多的是CSS问题，而不是JavaScript问题。如果您的问题是白色边框穿透了您的内容：

然后移除

#login-fenster {
    ...etc...
    height: 30vh;     <----- Remove this to keep everything inside regarding Y-Axis
    width: 18vw;      <----- Remove this to keep everything inside regarding X-Axis
    ...etc...
}

---

您可能会从这篇文章中得到一些线索，它展示了如何在周围的

环境中限制大小。您可能会从这篇文章中得到一些线索，它展示了如何在周围的

环境中限制大小。非常感谢您的详细回复！删除高度和宽度是正确的。但是，当我管理到目前为止，我得到了响应性设计，我应该放置宽度属性，但我可以，也应该省略高度属性。我说得对吗？@Stuckz是的-你说得对！我几乎每次都使用

vh

，除去高度，

vw

更为常见。虽然。。。如果我站在你的立场，我就不会担心让登录下拉列表有响应性了

<input style="width: 100%;" class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input style="width: 100%;" class="login-form" type="password" placeholder="Passwort" name="password" required />