请添加媒体

Question

我正在使用Bootstrap表单进行项目。很简单，当窗口调整大小时，我希望表单具有滚动条。我尝试将overflow-auto类添加到div中，但这不起作用。因此，当我调整窗口大小时，不会出现滚动。这是我的代码。

.form-container {
	border-radius: 25px;
  border: 1px solid black;
	padding: 15px;
	position: fixed;
	top: 50%;
  left: 50%;
	transform: translate(-50%, -50%);
}

.register-container { max-width: 500px; }

.title-header {
	font-size: 25px;
	font-weight: bold;
}

<div class="overflow-auto container form-container register-container">
    <h1 class="title-header">REGISTER</h1>
    <form id="register" method="post" action="register">
        <?php writeMessageBoxIfMessage($message); ?>
        <div class="form-group row">
            <div class="col-sm-6">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">FIRST NAME</label> <br>
                <input id="firstname" name="firstname" maxlength="80" required>
            </div>
            <div class="col-sm-6">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">LAST NAME</label> <br>
                <input id="lastname" name="lastname" maxlength="80" required>
            </div>
            <div class="col-sm-12">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">EMAIL</label> <br>
                <input type="email" id="email" name="email" maxlength="255" required>
            </div>
            <div class="col-sm-12">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">PASSWORD</label> <br>
                <input type="password" id="password" name="password" maxlength="80" required>
            </div>
            <div class="col-sm-12">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">CONFIRM PASSWORD</label> <br>
                <input type="password" id="confirm-password" name="confirm-password" maxlength="80" required>
            </div>
            <div class="col-sm-6">
                Already have an account? <br> Click <a href="login">here</span></a> to login.
            </div>
            <div class="col-sm-6">
                <input id="register" type="submit" name="submit"
                    value="REGISTER" />
            </div>
        </div>
    </form>
</div>

任何人都可以提供一些建议，以便我进行滚动吗？

Answer 1

目前无法复制，但请尝试使用位置：绝对；

并给一个容器位置：相对；

而不是使用“固定”位置。

让我知道这是否无效。

Answer 2

如果表格的高度更高，我希望您希望内部滚动。

使用以下CSS，

尝试一下。

#register {
    max-height: 200px;
    overflow: scroll;
}

Answer 3

请添加媒体

@media (max-height: 420px) {
  #register {
    height: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

为获得更好的解决方案，并检查您的设备在媒体中的高度应为（max-height：yourDeviceHeight）

.form-container {
	border-radius: 25px;
  border: 1px solid black;
	padding: 15px;
	position: fixed;
	top: 50%;
  left: 50%;
	transform: translate(-50%, -50%);
}

.register-container { max-width: 500px; }

.title-header {
	font-size: 25px;
	font-weight: bold;
}


@media (max-height: 420px) {
  #register {
    height: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

<div class="overflow-auto container form-container register-container">
    <h1 class="title-header">REGISTER</h1>
    <form id="register" method="post" action="register">
        <?php writeMessageBoxIfMessage($message); ?>
        <div class="form-group row">
            <div class="col-sm-6">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">FIRST NAME</label> <br>
                <input id="firstname" name="firstname" maxlength="80" required>
            </div>
            <div class="col-sm-6">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">LAST NAME</label> <br>
                <input id="lastname" name="lastname" maxlength="80" required>
            </div>
            <div class="col-sm-12">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">EMAIL</label> <br>
                <input type="email" id="email" name="email" maxlength="255" required>
            </div>
            <div class="col-sm-12">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">PASSWORD</label> <br>
                <input type="password" id="password" name="password" maxlength="80" required>
            </div>
            <div class="col-sm-12">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">CONFIRM PASSWORD</label> <br>
                <input type="password" id="confirm-password" name="confirm-password" maxlength="80" required>
            </div>
            <div class="col-sm-6">
                Already have an account? <br> Click <a href="login">here</span></a> to login.
            </div>
            <div class="col-sm-6">
                <input id="register" type="submit" name="submit"
                    value="REGISTER" />
            </div>
        </div>
    </form>
</div>

引导程序表单-调整屏幕大小时不会出现滚动

3 个答案:

请添加媒体