英文:
How can I stop divs from overlapping when window is smaller?
问题
以下是您要翻译的部分：
制作一个登录页面，其中有一个部分包含两个主内容的div。第一个div包含我的徽标、输入提示和登录/密码重置按钮。第二个旨在成为带有社交媒体链接的页脚。在全尺寸窗口上，我的徽标位于登录提示的左侧，社交媒体栏位于底部，这是应该的。然而，当我将窗口的高度缩小时，登录按钮会重叠到底部的社交媒体栏中。并且，由于页面被设置为在特定宽度后将徽标放在输入表单上，当窗口是一个小正方形时，它会一直重叠到徽标。我希望它保持分开，并且如果无法完全调整到小窗口，可以滚动。
我尝试了以下媒体查询来解决这个问题，但在窗口较小时没有效果。
.hcustom {
height: calc(100% - 73px);
}
@media screen and (max-width: 400px) {
.hcustom {
height: 100%; //我也尝试了100vh
}
}
我尝试过这个媒体查询，有些时候带有“Screen”这个词，因为我不确定是否做得对。
我另外尝试了将hcustom设置为min-height: 100vh;，这在较小的窗口上效果完美，但在较大的窗口上，会在第一个div和底部的社交媒体栏之间留下巨大的空白，导致大窗口出现滚动。
英文:
Making a log in page and have 2 divs of main content in a section. The first Div contains my logo, input prompts, and buttons for login/password reset. The second one is meant to be a footer with social media links. On a full size window my logo is to the left of the login prompt and the social media bar is at the bottom like it should. However, When I make the window a smaller height the login buttons overlap into the social media bar at the bottom. And since the page is set up to place the logo on top of the input form after a certain width it overlaps all the way to the logo when the window is a small square. I want it to stay separate. and to be scrollable if it cannot adjust fully to a small window.
I have tried the following media query to try to solve this but it has no effect when the window is smaller.
.hcustom {
height: calc(100% - 73px);
}
@media screen and (max-width: 400px) {
.hcustom {
height: 100%; //I have also tried with 100vh
}
}
I tried this with and without the "Screen" word because i was not sure if i was doing it right
Another close solution I had was that i set hcustom to min-height:100vh; and this worked perfectly for a smaller window BUT On a larger window it left a huge space between my first div and the social media bar at the bottom which made a large window scrollable.
The following is my index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="Description" content = "Login">
<title>LOGIN</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="loginStyles.css">
</head>
<body>
<section class="vh-100">
<!--FIRST Div -->
<div class="container-fluid hcustom">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-9 col-lg-6 col-xl-5 text-center">
<img src="img/main-logo.png"
alt="Login image" class="img-fluid" style="">
</div>
<div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
<form action="login.php" method="post">
<div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
<h2>Login</h2>
</div>
<hr>
<br>
<?php if(isset($_GET['error'])) {?>
<p class="error"><?php echo $_GET['error']; ?></p>
<?php } ?>
<div class="form-outline mb-4">
<input type="text" id="userN" name="usrname" placeholder="Enter User Name"
class="form-control form-control-lg" />
<label class="form-label" for="userN">
User Name
</label>
</div>
<div class="form-outline mb-3">
<input type="password" id="passW" name="password" placeholder="Enter Password"
class="form-control form-control-lg" />
<label class="form-label" for="passW">
Password
</label>
</div>
<div class="d-flex justify-content-between align-items-center">
<!-- Checkbox -->
<div class="form-check mb-0">
<input class="form-check-input me-2" type="checkbox" value="" id="rem" />
<label class="form-check-label" for="rem">
Remember me
</label>
</div>
<a href="#!" class="text-body">Forgot password?</a>
</div>
<div class= "pt-1 my-3 text-center">
<button type="button" class="btn btn-primary btn-lg"
style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
</div>
<div class="text-center mt-4 pt-2">
<p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account?
<a href="" class="link-danger">Register</a>
</p>
</div>
</form>
</div>
</div>
</div>
<!-- Second Div -->
<div
class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary ">
<div class="text-white mb-3 mb-md-0">
Social Media
</div>
<div>
<a href="" class="text-white me-4 text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
</a>
<a href="" class="text-white me-4 text-decoration-none" >
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg>
</a>
<a href="" class="text-white me-4 text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
</a>
<a href="" class="text-white text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book-half" viewBox="0 0 16 16">
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
</svg>
</a>
</div>
</div>
</section>
</body>
</html>
Then this is my loginStyles.css
.hcustom {
height: calc(100% - 73px);
}
@media screen and (max-width: 450px) {
.hcustom {
height: 100vh;
}
}
I am using bootstrap 5
答案1
得分: 1
你需要将图像和登录div的类更改为class="col-4"。
英文:
You need to change Image and Login div class to this class="col-4"
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="Description" content = "Login">
<title>LOGIN</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="loginStyles.css">
<style>
</style>
</head>
<body>
<section class="vh-100">
<!--FIRST Div -->
<div class="container-fluid hcustom">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-4">
<img src="img/main-logo.png"
alt="Login image" class="img-fluid" style="">
</div>
<div class="col-4">
<form action="login.php" method="post">
<div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
<h2>Login</h2>
</div>
<hr>
<br>
<?php if(isset($_GET['error'])) {?>
<p class="error"><?php echo $_GET['error']; ?></p>
<?php } ?>
<div class="form-outline mb-4">
<input type="text" id="userN" name="usrname" placeholder="Enter User Name"
class="form-control form-control-lg" />
<label class="form-label" for="userN">
User Name
</label>
</div>
<div class="form-outline mb-3">
<input type="password" id="passW" name="password" placeholder="Enter Password"
class="form-control form-control-lg" />
<label class="form-label" for="passW">
Password
</label>
</div>
<div class="d-flex justify-content-between align-items-center">
<!-- Checkbox -->
<div class="form-check mb-0">
<input class="form-check-input me-2" type="checkbox" value="" id="rem" />
<label class="form-check-label" for="rem">
Remember me
</label>
</div>
<a href="#!" class="text-body">Forgot password?</a>
</div>
<div class= "pt-1 my-3 text-center">
<button type="button" class="btn btn-primary btn-lg"
style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
</div>
<div class="text-center mt-4 pt-2">
<p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account?
<a href="" class="link-danger">Register</a>
</p>
</div>
</form>
</div>
</div>
</div>
<!-- Second Div -->
<div
class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary ">
<div class="text-white mb-3 mb-md-0">
Social Media
</div>
<div>
<a href="" class="text-white me-4 text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
</svg>
</a>
<a href="" class="text-white me-4 text-decoration-none" >
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
</svg>
</a>
<a href="" class="text-white me-4 text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
</svg>
</a>
<a href="" class="text-white text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book-half" viewBox="0 0 16 16">
</svg>
</a>
</div>
</div>
</section>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
你可以尝试使用一个容器来将你的两个div分组，而不是将它们放在两个单独的容器中。这样，你可以使它们各自占据容器所占空间的50%。
英文:
You could try to use a container to group both of your divs instead of putting them in two separate containers. That way you can make them take 50% each of the place that the container occupies.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论