頁面右側 400 像素設備屏幕寬度以下的空白區域。 如何讓它消失？
[英]White space on the right side of the page below 400px device screen width. How to make it disappear?
問題描述
我有兩個大問題：
我遇到的第一個麻煩是，當我在聯系部分測試我的網站的響應時，我總是遇到一個重復出現的問題：主體右側有一個空白區域（.2 rem - 1.2rem 寬度）當我嘗試在 400px 寬度的設備下顯示整個頁面。
我的第二個問題是我在頁腳中有社交媒體圖標。 它們在所有其他部分（多頁網站）中都正確顯示，但只有在這里才會阻止它們正確顯示。 我嘗試將它們的主要 div 調整為 100% 寬度和 100% 最大寬度，但一個元素可能仍然比其他元素長，這顯然會導致此類問題。
所以關於白色空白區域，我認為重要的是要知道我有一個特殊樣式的滾動條，這也可能導致這個小惡作劇。 我不確定，所以我也嘗試刪除它，但沒有幫助。 一開始，我也遇到了與頁腳相同的問題，但不知何故，我設法解決了問題，並通過更正.footer-container 的寬度解決了這個問題。 從那時起，空白出現了，我的第二個問題是社交媒體圖標沒有正確顯示。
這是我的代碼：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="contacts.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<div class="floating-btn show-btn" aria-label="up button" role="button">
<img src="assets/svg_files/chevron-up-solid.svg" alt="up img" />
</div>
<header>
<!--NAVBAR-->
<nav>
<ul class="menu" id="desktop-menu">
<li class="nav-item"><a href="home.html">Főoldal</a></li>
<li class="nav-item"><a href="aboutus.html">Rólunk</a></li>
<li class="nav-item"><a href="services.html">Szolgáltatások</a></li>
<li class="nav-item"><a href="whyus.html">Miért mi?</a></li>
<li class="nav-item"><a href="gallery.html">Galéria</a></li>
<li class="nav-item"><a href="contacts.html">Kapcsolat</a></li>
</ul>
<!--HAMBURGER ICON-->
<div class="header-right-gap">
<button class="hamburger" aria-label="hamburger button">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</button>
</div>
</nav>
<!--MOBILE MENU-->
<div class="mobile-menu">
<ul class="m-menu">
<li class="nav-item"><a href="home.html">Főoldal</a></li>
<li class="nav-item"><a href="aboutus.html">Rólunk</a></li>
<li class="nav-item"><a href="services.html">Szolgáltatások</a></li>
<li class="nav-item"><a href="whyus.html">Miért mi?</a></li>
<li class="nav-item"><a href="gallery.html">Galéria</a></li>
<li class="nav-item"><a href="contacts.html">Kapcsolat</a></li>
</ul>
</div>
</header>
<main>
<!--CONTACT FORM-->
<div class="container">
<form>
<h1>Kapcsolat</h1>
<input type="text" id="firstName" placeholder="Családnév" required>
<input type="text" id="lastName" placeholder="Keresztnév" required>
<input type="email" id="email" placeholder="Email" required>
<input type="text" id="mobile" placeholder="Telefonszám" required>
<h4 class="contactus">Lépjen velünk kapcsolatba!</h4>
<textarea id="texti" required></textarea>
<input type="submit" value="Elküldés" id="button">
</form>
</div>
</main>
<footer>
<div class="footer-container">
<!--COMPANY INFORMATION, CONTATCTS-->
<div class="footer-top">
<div>
<article>
<h2>Elérhetőségeink</h2>
<div class="cellphone">
<a href="tel:+36709424298"><img src="assets/png/telephone.png" alt="phone-icon"></a>
<h3><span>Telefonszám:</span> +36709424298</h3>
</div>
<div class="internet">
<a href="mailto:eckertmuvek@gmail.com"><img src="assets/png/mail.png" alt="email-icon"></a>
<h3><span>E-mail:</span> eckertmuvek@gmail.com</h3>
</div>
<div class="headquarter">
<a href="#"><img src="assets/png/location.png" alt="company-icon"></a>
<h3><span>Telephely:</span> Budapest, 1182 Török Bálint u. 16/b</h3>
</div>
<div class="opening-hours">
<a href="#"><img src="assets/png/clock.png" alt="op-icon"></a>
<h3><span>Nyitvatartási idő:</span> hétfő - péntek(7:00 - 17:30)</h3>
</div>
</article>
</div>
<!--TEXT-->
<div class="text-container">
<h4>Céginformációk</h4>
<p>
<ol>
<li>
<h5>Cégjegyzékszám: </h5>
<p> 01 09 996342</p>
</li>
<li>
<h5>Adószám: </h5>
<p>24222716243</p>
</li>
<li>
<h5>Számlaszám: </h5>
<p>112131423-43242142-432412421</p>
</li>
<li>
<h5>Cégnév: </h5>
<p>Eckert Művek Korlátolt Felelősségű Társaság</p>
</li>
</ol>
</p>
</div>
<!--
<div class="text-container">
<h4>Ttitle-1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dicta modi laborum quibusdam quis natus debitis qui dolor
voluptatibus ab sit, cum saepe enim unde doloribus veniam
numquam perspiciatis optio impedit.</p>
</div>
-->
<!--POLICIES-->
<div class="policies">
<a href="#">Impresszum</a>
<a href="#">GDPR Tájékoztató</a>
<a href="#">Süti Tájékoztató</a>
</div>
</div>
<!--MAP-->
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2699.366130757782!2d19.217992451587673!3d47.42430370844346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741c1f21fa88e89%3A0x44673b68b84b51c9!2zQnVkYXBlc3QsIFTDtnLDtmsgQsOhbGludCB1LiAxNmIsIDExODI!5e0!3m2!1shu!2shu!4v1672662477180!5m2!1shu!2shu"
height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!--SOCIAL MEDIA ICONS-->
<div class="social-media-icons">
<div class="sm-container" id="insta">
<div class="sm-icon">
<a href="images/instagram-logo.svg" class="fa fa-instagram"></a>
</div>
</div>
<div class="sm-container" id="github">
<div class="sm-icon">
<a href="images/github-logo.svg" class="fa fa-github"></a>
</div>
</div>
<div class="sm-container" id="facebook">
<div class="sm-icon">
<a href="images/facebook-logo.svg" class="fa fa-facebook"></a>
</div>
</div>
<div class="sm-container" id="linkedin">
<div class="sm-icon">
<a href="images/linkedin-logo.svg" class="fa fa-linkedin"></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© Eckert Művek Kft. Minden jog fenntartva.</p>
</div>
</div>
</footer>
<script src="contacts.js"></script>
</body>
</html>
這是我的 CSS 代碼：
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
--nav-height: 100px; /*80%*/
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
width: 100%;
font-size: 12px;
font-family: sans-serif;
}
.floating-btn {
position: fixed;
bottom: 3.5vh;
right: 0;
width: 50px;
height: 50px;
z-index: 100;
background-color: yellow;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 5px hsla(0, 0%, 0%, hsla(0,0%,0%,0.5));
cursor: pointer;
margin-right: 1rem;
border: 1px solid #000;
}
.show-btn {
display: block;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 100;
background-color: #000;
}
/*Srcollbar*/
::-webkit-scrollbar{
width: 15px;
background: #000;
}
::-webkit-scrollbar-thumb {
background: yellow;
border-radius: 10px;
border: 1px solid black;
}
::-webkit-scrollbar-thumb:active {
background: orangered;
}
nav {
display: flex;
width: min(90%, 1200px);
height: inherit;
align-items: center;
justify-content: flex-start;
margin-inline: unset;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 20px;
left: 2.5rem;
gap: 1rem;
/*margin-top: -2.5rem;*/
}
nav a {
max-height: var(--nav-height);
align-items: center;
margin-inline: auto;
font-size: 20px;
position: relative;
height: 100%;
}
nav ul {
display: flex;
gap: 1rem;
width: 100%;
list-style: none;
margin-top: 3rem;
}
.nav-item a {
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 20px;
height: 100%;
margin: .5em .8em;
padding: 10px;
}
.nav-item a::before,
.nav-item a::after {
content: '';
height: 14px;
width: 14px;
position: absolute;
transition: all .35s ease;
opacity: 0;
}
nav a::before {
content: '';
right: 0;
top: 0;
border-top: 3px solid #ffed4b;
border-right: 3px solid #fdcd3b;
transform: translate(-100%, 50%); /*-100%, 50%*/
}
.nav-item a:after {
content: '';
left: 0;
bottom: 0;
border-bottom: 3px solid #fdcd3b;
border-left: 3px solid #ffed4b;
transform: translate(100%, -50%); /*100%, -50%*/
}
.nav-item a:hover:before,
.nav-item a:hover:after{
transform: translate(0,0);
opacity: 1;
}
.nav-item a:hover {
text-decoration: underline;
color:yellow;
}
.container{
min-height: 100vh;
width: 99.vw;
background: #08071d;
display: flex;
justify-content: center;
align-items: center;
background: url("assets/images/mainpage/106811484-1608045351058-gettyimages-1126750618-dsc_1540.jpeg") no-repeat center center/cover;
}
.container form{
width: 670px; /*670px*/
height: 450px;
display: flex;
justify-content: center;
box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
border-radius: 15px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
flex-wrap: wrap;
overflow-x: hidden;
}
.container form h1{
color: #fff;
font-weight: 500;
margin-top: 20px;
width: 500px;
text-align: center;
}
.container form input{
width: 290px;
height: 40px;
padding-left: 10px;
outline: none;
border: none;
font-size: 25px;
margin-bottom: 10px;
background: none;
border-bottom: 2px solid #fff;
}
.container form input::placeholder{
color: #ddd;
}
.container form #lastName,
.container form #mobile{
margin-left: 20px;
}
.container form h4{
color: #fff;
font-weight: 300;
width: 600px;
margin-top: 20px;
}
.container form textarea{
background: none;
border: none;
border-bottom: 2px solid #fff;
color: #fff;
font-weight: 200;
font-size: 25px;
padding: 10px;
outline: none;
min-width: 600px;
max-width: 600px;
min-height: 80px;
max-height: 80px;
}
.contactus {
font-size: 18px;
}
input[type="text"]:focus, input[type="email"]:focus, #texti:focus {
border-bottom: 3px solid #fdcd3b;
}
textarea::-webkit-scrollbar{
width: 1em;
}
textarea::-webkit-scrollbar-thumb{
background-color: rgba(194,194,194,0.713);
}
.container form #button{
border: 1px solid;
background: transparent;
border-radius: 50px;
margin-top: 20px;
font-weight: 600;
font-size: 20px;
color: #fff;
width: 100px;
padding: 0;
margin-right: 500px;
margin-bottom: 30px;
transition: 0.3s;
}
.container form #button:hover{
opacity: 0.9;
transform: scale(1.2);
background-color: black;
color: yellow;
}
/*FOOTER*/
footer {
width: 100%;
background-color: #000;
padding-block: 4rem;
color: white;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-inline: auto;
width: min(90%, 1200px);
}
.footer-top {
width: 100%;
height: 100%;
color: #fff;
font-size: 10px;
display: flex;
justify-content: space-around;
}
.footer-top h2 {
text-align: center;
justify-content: center;
align-items: center;
}
.footer-top article div {
line-height: 2.5rem;
}
.footer-top article div:first-of-type {
margin-top: 1rem;
}
.footer-top img {
height: 64px;
}
.text-container p {
margin-top: 2rem;
}
.text-container ol li {
line-height: 1.5rem;
}
/*CONTACT ICONS*/
.cellphone img, .internet img, .headquarter img, .opening-hours img{
background-color: yellow;
border-radius: 50px;
transition: all 0.3s linear;
}
footer img:hover {
background-color: orangered;
border-radius: 40px;
transform: rotate(-360deg);
}
.footer-bottom {
text-align: center;
margin-top: 2rem;
}
span {
color: yellow;
}
.text-container {
justify-content: space-between;
width: 20vw;;
font-size: 0.8rem;
}
/*POLICIES LINKS*/
.policies {
display: flex;
flex-direction: column;
font-size: 14px;
text-transform: uppercase;
}
.policies a {
color: yellow;
font-size: 10px;
line-height: 2rem;
}
.policies a:hover {
color: orangered;
}
/*MAP*/
.map {
margin-inline: auto;
}
/*SOCIAL MEDIA ICONS*/
.social-media-icons {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.sm-container {
display: flex;
justify-content: center;
gap: 2rem;
padding:1rem;
border: 1px black;
width: 100%;
height: 100%;
}
.sm-container a:active {
color: yellow;
}
.fa {
border-radius: 50%;
width: 100%;
height: 100%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 30px;
/**/
}
.fa-instagram {
background: #125688;
color: white;
padding: 1rem;
}
.fa-github {
background: white;
color: black;
padding: 1rem;
}
.fa-facebook {
background: #4267B2;
color: white;
padding: 1rem;
}
.fa-linkedin {
background: #3B5998;
color: white;
padding: 1rem;
}
.sm-icon {
transition: all 0.3s linear;
}
.sm-icon:hover {
transform: scale(1.2);
}
.fa:hover {
background-color: #fdcd3b;
}
/*MOBILE MENU*/
.mobile-menu {
display: none;
}
.mobile-menu {
display: flex;
width: 100%; /*.line a szülő tehát 40px a width*/
height: calc(100vh - 80px);
align-items: center;
justify-content: center;
position: absolute;
top: 80px;
left: 0;
background-color: black;
transform: translate(-100%);
transition: all 0.4s ease;
z-index: 100;
}
.mobile-menu-on {
display: flex; /**/
transform: translate(0);
}
.m-menu {
display: flex;
flex-direction: column;
gap: 2rem;
text-align: center;
font-size: 1.4rem;
}
/*hamburger icon*/
.header-right-gap {
width: 100px;
margin-left: 2rem;
}
.hamburger {
display: none;
position: fixed;
width: 50px;
height: 50px;
border: none;
background-color: transparent;
top: 0;
left: 1;
margin-top: 1.5rem;
}
.hamburger:hover {
border: 6px solid;
border-color: yellow;
width: 43px;
margin-left: 4px;
transform: scale(1.2);
}
.hamburger:hover .line.line-1 {
/*display: none;*/
transform: rotate(45deg) translateY(7.5px);
background-color: yellow;
}
.hamburger:hover .line.line-2 {
display: none;
}
.hamburger:hover .line.line-3 {
/*display: none;*/
transform: rotate(-45deg) translateY(-7.5px);
background-color: yellow;
}
.line {
transition: all .4s ease;
width: 40px;
height: 5px;
background-color: white;
margin-block: 5px;
border-radius: 10px;
}
/*Media query*/
@media (max-width: 1200px) {
.hamburger {
display: block;
}
#desktop-menu {
display: none;
}
}
@media (max-width: 900px) {
footer nav ul {
flex-direction: column;
}
footer nav ul li a {
font-size: 15px;
/*padding: 15px;*/
}
}
@media (max-width: 750px) {
.footer-container {
display: flex;
flex-wrap: wrap;
}
footer nav ul li a {
font-size: 10px;
padding: 15px;
}
.text-container p {
font-size: 10px;
}
}
@media (max-width: 600px) {
.container form {
width: 470px;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
min-width: 300px;
max-width: 300px;
}
}
@media (max-width: 400px) {
.container {
max-width: 100%;
height: 100%;
overflow: hidden;
}
.container form {
max-width: 100%;
padding-top: 40px;
padding-bottom: 10px;
}
.container form input, h4 {
text-align: center;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
align-items: center;
min-width: 300px;
max-width: 300px;
}
.text-container {
width: 70vw;
}
.container form #button {
display: flex;
flex-direction: column;
}
footer {
width: 400px;
}
.footer-top {
display: flex;
flex-direction: column;
align-items: center;
}
}
1 個解決方案
解決方案1
0 2023-01-26 09:53:19
我曾經有過類似的問題，這是由於一個元素的邊距比它應該的大，它只是使那個 div 更大並將它推出視口，所以你可以檢查你的邊距，我可以看到你有相當很多邊距，內聯和右邊距。
保持div2與屏幕的左側，底部和右側齊平，但始終位於div1上方400px以下嗎？
[英]Keep div2 flush with left, bottom, and right of screen, but always 400px below above div1?
右側大空白屏幕尺寸767px及以下Bootstrap響應
[英]Big white Space on the right side On Screen Size 767px and Below Bootstrap responsive
在體內使用min-width：400px時，如何刪除導航欄中不需要的空間？
[英]How To Remove Unwanted space in Navigation Bar When Using min-width:400px In The Body?
我的導航欄以300px的寬度折疊。 導航欄中的元素在400px處折疊
[英]My nav bar collapses at 300px width. Elements inside nav bar collapse at 400px
在寬度為 100px、高度為 400px 的區域中顯示外部網頁
[英]Display an external web page in a width of 100px and height of 400px area
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.