英文:
How to Remove Extra White Space inside Body at Bottom
问题
我正在创建一个基于文章的网站，但在<body>底部出现了一个空白空间。
这是问题所在：
[请查看底部的Footer lorem行。](https://i.stack.imgur.com/DAHEF.png)
这是代码，有人能解决吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="scss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
<header>
<div class="con1">
<img src="https://lh3.googleusercontent.com/a/AAcHTtexpBPyQQMZKXRYF3APKZhGsVounjRCydXqOYv-ij6fCVo=s96-c-rg-br100"
alt="">
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
<div class="con2">
<div class="ham_burger">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</header>
<div class="maincontent">
<div class="leftside">
<h1>
Hello,
</h1>
<h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem voluptatibus ut tempora voluptates dolorem perspiciatis dolor eum excepturi porro, ullam, nesciunt veritatis tenetur, cupiditate quidem.
</h2>
</div>
<div class="rightside">
<img src="https://jamesclear.com/wp-content/uploads/2023/05/atomic-habits-full-dots.png" alt="">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</div>
<footer>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque numquam necessitatibus asperiores unde enim rerum, ipsam, voluptas quibusdam non vitae consectetur sequi molestiae!
</footer>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500&family=Poppins:wght@300&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}
html {
height: 100%;
width: 100%;
}
body {
min-height: 100%;
}
header {
position: relative;
display: flex;
height: 91px;
}
a {
font-size: medium;
text-decoration: none;
font-family: "Maven Pro", sans-serif;
color: black;
}
.con1 {
z-index: 1;
display: flex;
background-color: white;
height: inherit;
justify-content: flex-start;
align-items: center;
width: 50%;
gap: 3vw;
padding-left: 6vw;
}
.con1 img {
height: 47px;
}
.con2 {
display: flex;
justify-content: flex-end;
height: inherit;
background-color: white;
padding-right: 6vw;
align-items: center;
width: 50%;
}
nav {
display: flex;
gap: 3vw;
}
.maincontent {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.leftside {
background-color: red;
display: flex;
flex-direction: column;
width: 50%;
padding-left: 6vw;
padding-top: 8vh;
}
.rightside {
padding-top: 8vh;
background-color: yellow;
display: flex;
flex-direction: column;
width: 50%;
align-items: center;
}
.rightside img {
width: 37vw;
height: auto;
}
@media screen and (max-width: 500px) {
.maincontent {
display: flex;
flex-direction: column;
}
.leftside {
width: 100%;
justify-content: center;
}
.rightside {
justify-content: center;
text-align: center;
width: 100%;
height: 91 px;
padding-top: 8vh;
background-color: yellow;
display: flex;
flex-direction: column;
}
}
我提供了CSS和HTML代码。我使用红色边框来检查问题的原因，似乎是
占据了整个高度，但左侧和右侧组件没有。但找不到解决方法。英文:
I am making an Article Based Website But getting A White space at bottom of <Body>
here is the Problem
See At the bottom Footer lorem line.
Here is the code can anyone solve it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="scss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
<header>
<div class="con1">
<img src="https://lh3.googleusercontent.com/a/AAcHTtexpBPyQQMZKXRYF3APKZhGsVounjRCydXqOYv-ij6fCVo=s96-c-rg-br100"
alt="">
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
<div class="con2">
<div class="ham_burger">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</header>
<div class="maincontent">
<div class="leftside">
<h1>
Hello,
</h1>
<h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem voluptatibus ut tempora voluptates dolorem perspiciatis dolor eum excepturi porro, ullam, nesciunt veritatis tenetur, cupiditate quidem.
</h2>
</div>
<div class="rightside">
<img src="https://jamesclear.com/wp-content/uploads/2023/05/atomic-habits-full-dots.png" alt="">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</div>
<footer>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque numquam necessitatibus asperiores unde enim rerum, ipsam, voluptas quibusdam non vitae consectetur sequi molestiae!
</footer>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500&family=Poppins:wght@300&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}
html {
height: 100%;
width: 100%;
}
body {
min-height: 100%;
}
header {
position: relative;
display: flex;
height: 91px;
}
a {
font-size: medium;
text-decoration: none;
font-family: "Maven Pro", sans-serif;
color: black;
}
.con1 {
z-index: 1;
display: flex;
background-color: white;
height: inherit;
justify-content: flex-start;
align-items: center;
width: 50%;
gap: 3vw;
padding-left: 6vw;
}
.con1 img {
height: 47px;
}
.con2 {
display: flex;
justify-content: flex-end;
height: inherit;
background-color: white;
padding-right: 6vw;
align-items: center;
width: 50%;
}
nav {
display: flex;
gap: 3vw;
}
.maincontent {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.leftside {
background-color: red;
display: flex;
flex-direction: column;
width: 50%;
padding-left: 6vw;
padding-top: 8vh;
}
.rightside {
padding-top: 8vh;
background-color: yellow;
display: flex;
flex-direction: column;
width: 50%;
align-items: center;
}
.rightside img {
width: 37vw;
height: auto;
}
@media screen and (max-width: 500px) {
.maincontent {
display: flex;
flex-direction: column;
}
.leftside {
width: 100%;
justify-content: center;
}
.rightside {
justify-content: center;
text-align: center;
width: 100%;
height: 91 px;
padding-top: 8vh;
background-color: yellow;
display: flex;
flex-direction: column;
}
}
I have given css and html code. I have used Red border to check what is causing the problem and it seems the body is taking full length but the component left side and right side isn't. But Cant find the solution .
答案1
得分: 0
以下是翻译好的部分：
-
你的身体并没有你想象的那么高。
-
从
html中移除宽度和高度属性。 -
让
body具有min-height: 100vh，并且将其设为 flex 容器。 -
从
.maincontent中移除高度属性，而是添加flex-grow: 1以允许该元素扩展以填充剩余空间。
英文:
Your body isn't as high as you think there to begin with.
Remove width and height from html.
Make body have min-height: 100vh, and also make it a flex container.
Remove the height from .maincontent, and add flex-grow: 1 instead to allow the element to grow to fill the remaining space.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500&family=Poppins:wght@300&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
position: relative;
display: flex;
height: 91px;
}
a {
font-size: medium;
text-decoration: none;
font-family: "Maven Pro", sans-serif;
color: black;
}
.con1 {
z-index: 1;
display: flex;
background-color: white;
height: inherit;
justify-content: flex-start;
align-items: center;
width: 50%;
gap: 3vw;
padding-left: 6vw;
}
.con1 img {
height: 47px;
}
.con2 {
display: flex;
justify-content: flex-end;
height: inherit;
background-color: white;
padding-right: 6vw;
align-items: center;
width: 50%;
}
nav {
display: flex;
gap: 3vw;
}
.maincontent {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
.leftside {
background-color: red;
display: flex;
flex-direction: column;
width: 50%;
padding-left: 6vw;
padding-top: 8vh;
}
.rightside {
padding-top: 8vh;
background-color: yellow;
display: flex;
flex-direction: column;
width: 50%;
align-items: center;
}
.rightside img {
width: 37vw;
height: auto;
}
@media screen and (max-width: 500px) {
.maincontent {
display: flex;
flex-direction: column;
}
.leftside {
width: 100%;
justify-content: center;
}
.rightside {
justify-content: center;
text-align: center;
width: 100%;
height: 91 px;
padding-top: 8vh;
background-color: yellow;
display: flex;
flex-direction: column;
}
}
<!-- language: lang-html -->
<header>
<div class="con1">
<img src="https://lh3.googleusercontent.com/a/AAcHTtexpBPyQQMZKXRYF3APKZhGsVounjRCydXqOYv-ij6fCVo=s96-c-rg-br100"
alt="">
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
<div class="con2">
<div class="ham_burger">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</header>
<div class="maincontent">
<div class="leftside">
<h1>
Hello,
</h1>
<h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem voluptatibus ut tempora voluptates dolorem perspiciatis dolor eum excepturi porro, ullam, nesciunt veritatis tenetur, cupiditate quidem.
</h2>
</div>
<div class="rightside">
<img src="https://jamesclear.com/wp-content/uploads/2023/05/atomic-habits-full-dots.png" alt="">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</div>
<footer>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque numquam necessitatibus asperiores unde enim rerum, ipsam, voluptas quibusdam non vitae consectetur sequi molestiae!
</footer>
<!-- end snippet -->
答案2
得分: 0
额外的白色空间出现在您的 body 标签底部是因为 .maincontent 类中的 flex-wrap: wrap; 属性。
在 body 标签的样式中，设置 min-height: 100%，这会告诉浏览器确保 body 标签的高度为 100%。
英文:
The extra white space at the bottom of your body tag is due to the flex-wrap: wrap; property in . maincontent class
And in the styling of body tag,set min-height: 100% which will tell the browser to make sure that body tag is 100% tall
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论