个人中心
gpt4 book ai didi

Get form to be responzive while being in the center of the screen at att screnn sizes(使窗体在屏幕大小处于屏幕中心时具有响应性)

转载 作者：bug小助手 更新时间：2023-10-25 14:48:15 27 4
gpt4 key购买 nike



I'm trying to get my forms to stay in the middle of the screen and scale according to the size of the middle section of my site. Right now for most sizes it's ok but when the screen gets small the form overlaps with my navbar section and my footer section because the size of my form doesn't change. Here's an example of one of my forms with the navbar,body and footer styling. For the most part they're all similar in terms of styling.
HTML

我正在努力让我的表格停留在屏幕的中间，并根据我网站中间部分的大小进行缩放。现在，对于大多数大小来说，这是可以的，但当屏幕变小时，表单会与我的导航栏部分和页脚部分重叠，因为我的表单的大小不会改变。这是我的一个带有导航栏、正文和页脚样式的表单的示例。在大多数情况下，它们在造型方面都是相似的。超文本标记语言




.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 70px;
    padding: 0 20px;
    background-color: white;
    top: 0;
    left: 0;
}
.topnav{
    width: 100%;
    height: calc(100vh / 10);
    background-color: #2B78E4;
    display: flex;
    align-items: center;
    overflow: hidden;
    /*justify-content: space-between;*/
}
.topnav a{
    text-decoration: none;
    color: black;
    font-family: "Helvetica", sans-serif;
}
.dropbtn {
    background-color: #fff1f1;
    color: Black;
    padding: 8px 16px;
}
.dropdown {
    position: relative;
    display: inline-block;
    padding: 8px 16px;
    font-style: inherit;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: #ddd;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #f6f6f6;
}
.nav-btn{
    background-color: #fff1f1;
    color: Black;
    padding: 8px 16px;
}
#login-btn{
    position: relative;
    display: inline-block;
    margin-left: auto;
}
#signUp-btn{
    position: relative;
    display: inline-block;
    float: right;
    padding-left: 20px;
}
#login-btn, #signUp-btn {
    float: right;
}
#nav-teams{
    position: relative;
    padding-left: 20px;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Helvetica", sans-serif;
    background-color: #666666;
}
footer {
    background-color: #999999;
    background-size: 50px;
    height : calc(100vh/8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    overflow: hidden;
}
.footer-links {
    display: flex;
    align-items: center;
}
.footer-links a {
    margin-left: 20px;
}
#signup-title-init{
     margin-bottom: 10px;
 }
#signup-title-init h2 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    overflow-wrap: break-word;
}

#signup-body-init h1 {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

#signup-body-init p {
    font-size: 16px;
    text-align: center;
}

#signup-footer-init p {
    font-size: 14px;
    text-align: center;
}
#signup-footer-init{
    border-top:1px solid ;
}
.entry{
    width:100%;
}
#signup-footer-init a {
    font-size: 14px;
    text-align: center;
}
.popup-signup-init {
    border: 2px solid black;
    padding: 10px;
    width: 45%;
    max-width: 400px;
    background-color: #999;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;

}
.terms-container {
    display: flex;
    align-items: center;
}

.resend-container {
    display: flex;
    align-items: center;
}
#terms-link{
    color:blue;
}
#terms{
    margin-right: 5px;
}
#termsError{
    display:none;
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sign Up</title>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>
<header>
    <div class="topnav" id="myTopnav">
        <a href = homepage.html>
            <img src="images/fb-helmet.png" alt="Logo" class = "helmet-logo">
        </a>
        <div class="teams-btn" id="nav-teams">
            <button class="nav-btn" ><a href="Teams.html">Teams</a></button>
        </div>

        <div class="dropdown">
            <button class="dropbtn">Seasons
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="Seasons.html">2022</a>
                <a href="www.collegefbarchive.com/seasons/2021">2021</a>
                <a href="www.collegefbarchive.com/seasons/2020">2020</a>
            </div>
        </div>
        <div id="login-btn">
            <button class = "nav-btn" ><a href="SignIn.html">Log In</a></button>
        </div>

        <div id="signUp-btn">
            <button class="nav-btn" ><a href ="Signup.html">Sign Up</a></button>
        </div>
    </div>
</header>
<body>
<form id="signUp-init">
    <div class="popup-signup-init">
        <div id="signup-title-init">
            <h2>Sign Up for CollegeFB-Archive</h2>
        </div>
        <div id="signup-body-init">
            <label for="email">Email:</label><br>
            <input class="entry" type="email" id="email" name="email" required>
            <label for="fullname">Full Name:</label><br>
            <input class="entry" type="text" id="fullname" name="fullname" required>
            <label for="password">Password:</label><br>
            <input class="entry" type="password" id="password" name="password" required>
            <label for="password">Confirm Password:</label><br>
            <input class="entry" type="password" id="confirm-password" name="password" required>
            <div class="terms-container">
                <input type="checkbox" id="terms" name="terms">
                <label for="terms">I agree to the </label><a id="terms-link" href="Terms%20of%20Use.html">Terms of Service</a>
            </div><br>
            <p id="termsError" >You must accept the terms of service.</p>
            <input type="submit" value="Continue">
        </div>
        <div id="signup-footer-init">
            <div class="resend-container">
                <p>Did not get the email?</p><a href="#">Click here</a>
            </div>
        </div>
    </div>
</form>
</body>
<footer>
    <div class="footer-logo">
        <a href = homepage.html>
            <img src="images/fb-helmet.png" alt="Logo" class="helmet-logo">
        </a>
    </div>
    <div class="footer-links">
        <a href="Contact.html">Contact Us</a>
        <a href="Terms%20of%20Use.html">Terms of Use</a>
    </div>
</footer>
</html>




so far I've attempted playing with the position setting but anything other than absolute moves the form up and overlapping with the navbar and outside of the view screen. I've attempted adjusting the height and width of the div the form is in and that affects the form container but not the inputs and labels within that form.

到目前为止，我已经尝试了使用位置设置，但除了绝对设置之外，任何其他设置都会将表单向上移动，并与导航栏重叠，并在视图屏幕之外。我尝试调整表单所在的div的高度和宽度，这会影响表单容器，但不会影响该表单中的输入和标签。


更多回答
优秀答案推荐

You can resolve this via media queries, like

您可以通过媒体查询来解决此问题，例如


@media only screen and (max-width: 700px) {
    .popup-signup-init {
        width: 20%;
    }
}

Tested the above and it was almost perfect, you will need to figure out the exact bounds for this specific media query, but the idea should be the path you need to go through in order to solve this problem.

测试了上面的内容，它几乎是完美的，您需要找出这个特定媒体查询的确切界限，但这个想法应该是您需要通过的路径来解决这个问题。




.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 70px;
    padding: 0 20px;
    background-color: white;
    top: 0;
    left: 0;
}
.topnav{
    width: 100%;
    height: calc(100vh / 10);
    background-color: #2B78E4;
    display: flex;
    align-items: center;
    overflow: hidden;
    /*justify-content: space-between;*/
}
.topnav a{
    text-decoration: none;
    color: black;
    font-family: "Helvetica", sans-serif;
}
.dropbtn {
    background-color: #fff1f1;
    color: Black;
    padding: 8px 16px;
}
.dropdown {
    position: relative;
    display: inline-block;
    padding: 8px 16px;
    font-style: inherit;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: #ddd;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #f6f6f6;
}
.nav-btn{
    background-color: #fff1f1;
    color: Black;
    padding: 8px 16px;
}
#login-btn{
    position: relative;
    display: inline-block;
    margin-left: auto;
}
#signUp-btn{
    position: relative;
    display: inline-block;
    float: right;
    padding-left: 20px;
}
#login-btn, #signUp-btn {
    float: right;
}
#nav-teams{
    position: relative;
    padding-left: 20px;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Helvetica", sans-serif;
    background-color: #666666;
}
footer {
    background-color: #999999;
    background-size: 50px;
    height : calc(100vh/8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    overflow: hidden;
}
.footer-links {
    display: flex;
    align-items: center;
}
.footer-links a {
    margin-left: 20px;
}
#signup-title-init{
     margin-bottom: 10px;
 }
#signup-title-init h2 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    overflow-wrap: break-word;
}

#signup-body-init h1 {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

#signup-body-init p {
    font-size: 16px;
    text-align: center;
}

#signup-footer-init p {
    font-size: 14px;
    text-align: center;
}
#signup-footer-init{
    border-top:1px solid ;
}
.entry{
    width:100%;
}
#signup-footer-init a {
    font-size: 14px;
    text-align: center;
}
.popup-signup-init {
    border: 2px solid black;
    padding: 10px;
    width: 45%;
    max-width: 400px;
    background-color: #999;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;

}
.terms-container {
    display: flex;
    align-items: center;
}

.resend-container {
    display: flex;
    align-items: center;
}
#terms-link{
    color:blue;
}
#terms{
    margin-right: 5px;
}
#termsError{
    display:none;
    color:red;
}

@media only screen and (max-width: 700px) {
    .popup-signup-init {
        width: 20%;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sign Up</title>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>
<header>
    <div class="topnav" id="myTopnav">
        <a href = homepage.html>
            <img src="images/fb-helmet.png" alt="Logo" class = "helmet-logo">
        </a>
        <div class="teams-btn" id="nav-teams">
            <button class="nav-btn" ><a href="Teams.html">Teams</a></button>
        </div>

        <div class="dropdown">
            <button class="dropbtn">Seasons
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="Seasons.html">2022</a>
                <a href="www.collegefbarchive.com/seasons/2021">2021</a>
                <a href="www.collegefbarchive.com/seasons/2020">2020</a>
            </div>
        </div>
        <div id="login-btn">
            <button class = "nav-btn" ><a href="SignIn.html">Log In</a></button>
        </div>

        <div id="signUp-btn">
            <button class="nav-btn" ><a href ="Signup.html">Sign Up</a></button>
        </div>
    </div>
</header>
<body>
<form id="signUp-init">
    <div class="popup-signup-init">
        <div id="signup-title-init">
            <h2>Sign Up for CollegeFB-Archive</h2>
        </div>
        <div id="signup-body-init">
            <label for="email">Email:</label><br>
            <input class="entry" type="email" id="email" name="email" required>
            <label for="fullname">Full Name:</label><br>
            <input class="entry" type="text" id="fullname" name="fullname" required>
            <label for="password">Password:</label><br>
            <input class="entry" type="password" id="password" name="password" required>
            <label for="password">Confirm Password:</label><br>
            <input class="entry" type="password" id="confirm-password" name="password" required>
            <div class="terms-container">
                <input type="checkbox" id="terms" name="terms">
                <label for="terms">I agree to the </label><a id="terms-link" href="Terms%20of%20Use.html">Terms of Service</a>
            </div><br>
            <p id="termsError" >You must accept the terms of service.</p>
            <input type="submit" value="Continue">
        </div>
        <div id="signup-footer-init">
            <div class="resend-container">
                <p>Did not get the email?</p><a href="#">Click here</a>
            </div>
        </div>
    </div>
</form>
</body>
<footer>
    <div class="footer-logo">
        <a href = homepage.html>
            <img src="images/fb-helmet.png" alt="Logo" class="helmet-logo">
        </a>
    </div>
    <div class="footer-links">
        <a href="Contact.html">Contact Us</a>
        <a href="Terms%20of%20Use.html">Terms of Use</a>
    </div>
</footer>
</html>




更多回答

27 4 0
文章推荐： How to get all windows of all applications with GTK4(如何使用GTK4获取所有应用程序的所有窗口)
文章推荐： Cucumber Runner class & running tags from any Main Java Program(Cucumber Runner类&来自任何Java主程序的运行标记)
文章推荐： HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"] is returning IPv6(HttpContext.Current.Request.ServerVariables[“REMOTE_ADDR”]正在返回IPV6)
文章推荐： WARN [nuxt] Two component files resolving(WARN [nuxt]两个组件文件解析)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com