Html 使用javascript添加元素后，包装器高度不会更新_Html_Css

Html 使用javascript添加元素后，包装器高度不会更新

html css

Html 使用javascript添加元素后，包装器高度不会更新,html,css,Html,Css,我想添加一个输入元素，在表单中键入文本，但这样做会使表单与页面的页脚重叠。我尝试添加溢出属性，但没有成功。我对网络开发还很陌生，我想不出一个解决方案这是我的CSS： * { margin: 0; padding: 0; } html, body { height: 99%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -100p

我想添加一个输入元素，在表单中键入文本，但这样做会使表单与页面的页脚重叠。我尝试添加溢出属性，但没有成功。我对网络开发还很陌生，我想不出一个解决方案

这是我的CSS：

* {
margin: 0;
padding: 0;
}
html, body {
    height: 99%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 110px; /* .push must be the same height as .footer */
}

.footer {
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 110px;
    background-color: #f5f5f5;
}
*

这是我的HTML：

<body>
<div class="wrapper">
    <div class="container">
            <div class="text-xs-center">
                <form id="questionForm" method="post" autocomplete="off">
                    <label>Question</label></br>
                    <textarea name="Question" cols="40" rows="4"></textarea></br>
                    <label>Answers:</label></br>
                    <input id="1" name="Answer1" type="text"/></br></br>
                    <input id="2" name="Answer2" type="text"/></br></br>
                    <button id="addAnswerButton" type="button" class="btn btn-sm btn-primary" onclick="addAnswerField()">Add Answer Field</button></br></br>
                    <noscript>
                        <p>Please enable Java-Script to add more answers</p>
                    </noscript>
                    <script type="text/javascript">
                        function addAnswerField(){
                            var form = document.getElementById("questionForm");
                            var thisButton = document.getElementById("addAnswerButton");

                            // find last Index
                            var lastIndex = 1;
                            var lastElement = document.getElementById(lastIndex.toString());
                            while (lastElement != null) {
                                lastIndex++;
                                console.log(lastIndex.toString());
                                lastElement = document.getElementById(lastIndex.toString());
                            }

                            var input = document.createElement("input");
                            input.type = "text";
                            input.name = "Answer" + lastIndex;
                            input.id = lastIndex.toString();

                            form.insertBefore(input, thisButton);
                            form.insertBefore(document.createElement("br"), thisButton);
                            form.insertBefore(document.createElement("br"), thisButton);
                        }
                    </script>
                    <input type="submit" class="btn btn-lg btn-success"/>
                </form>
            </div>
    </div>
</div> <!-- Content -->

<footer class="footer">
    <div class="container small">
        <p class="text-muted small">I don't have any rights on the Harry Potter Universe. All rights belong to their rightful owners.
            This site is using cookies to identify you for the next month. <br/>
            Credits - Idea: Laura Weasley Kletschko - Implementation: Niko Percival Wulfric Brian Tzioras <br/>
            <a href="impressum.html">Impressumg & Datenschutz</a>
        </p>
    </div>
</footer>

</body>


问题:



答复:







添加答案字段


请启用Java脚本以添加更多答案
函数addAnswerField（）{
var form=document.getElementById（“问题表单”）；
var thisButton=document.getElementById（“addAnswerButton”）；
//查找最后一个索引
var指数=1；
var lastElement=document.getElementById（lastIndex.toString（））；
while（lastElement！=null）{
lastIndex++；
log（lastIndex.toString（））；
lastElement=document.getElementById（lastIndex.toString（））；
}
var输入=document.createElement（“输入”）；
input.type=“text”；
input.name=“Answer”+lastIndex；
input.id=lastIndex.toString（）；
form.insertBefore（输入，此按钮）；
form.insertBefore（document.createElement（“br”），此按钮）；
form.insertBefore（document.createElement（“br”），此按钮）；
}
我对哈利波特世界没有任何权利。所有权利都属于其合法所有者。
本网站正在使用cookies来识别您下个月的身份

信贷-想法：劳拉·韦斯莱·克莱奇科-实施：尼科·珀西瓦尔·伍尔弗里克·布赖恩·齐奥拉斯

在页脚上方添加一个元素

<div class="push">

</div>
<footer class="footer">

[在此处找到解决方案][1] 或者只删除包装器边距的负值

  [1]: https://jsfiddle.net/437jtp3j/1

嗨，看看这个

也显示html。@atulquest93在这里你能解释一下为什么这对我来说非常有效吗？非常感谢。

html, body {
height: 99%;
}

.wrapper {
height: 82%;
overflow:auto;
}
.footer {
width: 100%;
height: 18%;
overflow:hidden;
}