jQuery 显示函数扭曲页面样式

Question

所以我有一个额外的 div，如果适当的 select 选项被 select 编辑，我会显示它。在 Firefox 中完美运行，但在 Chrome 或 Safari 中，当显示额外的 div 时，页脚保持在原来的位置。它不会回到底部。

这里有一个例子，请尝试在Safari 或Firefox 中打开它。 输出的window高度应该小了看看是什么问题

一些代码，检查 Fiddle 上的示例（检查上面的 link）

    <style>
    html, body {
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        padding: 0;
        position: relative;
        width: 100%;
    }
    body {
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-direction: column;
        /* Safari 6.1+ */
        display: flex;
        flex-direction: column;
    }
    .content {
        background-color: #f7f7f7;
        clear: both;
        min-height: 250px;
        padding: 20px 10%;
    }
</style>
<script>
    $(document).ready(function () {
        $("#extra_div").hide();
    });


    $('.selectpicker').change(function () {

        if ($(this).val() == '3') {
            $("#extra_div").show();
        } else {
            $("#extra_div").hide();
        }


    })
</script>

<body>
    <div id="okvir_registracije" style="background-color: #f7f7f7;margin-top: 73px; -webkit-flex: 1; -ms-flex: 1; flex: 1;">
        </br>
        <div class="content" id="login_content">
            <form name="registration" class="registration" method="post" id="form_login" onsubmit="return validateForm();">
                <fieldset style="background: white">
                    <label style="margin-left: 10px">Choose one:</label>
                    <select class="selectpicker" name="tip_uporabnika" id="tip_uporabnika" for="tip_uporabnika" onchange="show_div()">
                        <option value="1" selected="selected">izberi tip uporabnika</option>
                        <option value="3">Uporabnik</option>
                    </select>
                    <div id="extra_div">
                        </br>
                        <label style="margin-left: 10px" for="ime">Test 2</label>
                        </br>
                        <label style="margin-left: 10px">Test</label>
                        <select class="selectpicker" name="tip_uporabnika" id="tip_uporabnika" for="tip_uporabnika" onchange="show_div()">
                            <option value="1" selected="selected">izberi tip uporabnika</option>
                            <option value="2">Uporabnik</option>
                            <option value="3">Lastnik</option>
                        </select>
                        </br>
                        <label style="margin-left: 10px" for="ime">Name</label>
                        <input type="text" id="firstname" name="firstname" placeholder="vaše ime...">
                        <br/>
                        <label style="margin-left: 10px" for="priimek">Surname</label>
                        <input type="text" id="lastname" name="lastname" placeholder="vaš priimek...">
                        <br/>
                        <label style="margin-left: 10px" for="username">Example</label>
                        <input type="text" id="username" name="username" placeholder="vaše uporabniško ime...">
                        <br/></br>
                        <label style="margin-left: 10px" for="ime">Name</label>
                        <input type="text" id="firstname" name="firstname" placeholder="vaše ime...">
                        <br/>
                        <label style="margin-left: 10px" for="priimek">Surname</label>
                        <input type="text" id="lastname" name="lastname" placeholder="vaš priimek...">
                        <br/>
                        <label style="margin-left: 10px" for="username">Example</label>
                        <input type="text" id="username" name="username" placeholder="vaše uporabniško ime...">
                        <br/></br>
                        <label style="margin-left: 10px" for="ime">Name</label>
                        <input type="text" id="firstname" name="firstname" placeholder="vaše ime...">
                        <br/>
                        <label style="margin-left: 10px" for="priimek">Surname</label>
                        <input type="text" id="lastname" name="lastname" placeholder="vaš priimek...">
                        <br/>
                        <label style="margin-left: 10px" for="username">Example</label>
                        <input type="text" id="username" name="username" placeholder="vaše uporabniško ime...">
                        <br/>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <hr>
    <div id="footer" style="padding: 15px 0;text-align: center;width: 100%;height:25px;">&copy; Company | info@company.si</div>
</body>

这里有两张图片：

野生动物园：

火狐：

Answer 1

这与您为 body 指定的高度属性有关。这使得页脚无论如何都会粘在底部。

如果您想要粘性页脚，请尝试以下示例之一，这应该可以解决您的问题。

http://css-tricks.com/snippets/css/sticky-footer/

http://ryanfait.com/sticky-footer/

Answer 2

将高度设置为 100% 将产生当前浏览器 window 大小的高度。 Div's 将默认根据内容调整大小。删除所有 height: 100% 约束，你应该没问题。

Answer 3

删除 display:flex css 规则可以解决问题。不确定表单的确切最终结果应该是什么，但在删除上述规则时它不会与页脚重叠。

https://jsfiddle.net/v4po4gwc/22/

jQuery 显示函数扭曲页面样式

jQuery show function distorting style of page

html

javascript

css

jquery

show