Prepros / XAMPP在下一个div / footer下添加了不必要的空间 [英] Prepros/XAMPP adding unwanted space under last div/footer
问题描述
尽管将所有边距和填充设置为0，我突然发现处理我的html& css使用 Prepros （也尝试与XAMPP），添加额外（不需要的）空间在我的最后一个项目ie。页脚。当运行相同的html& css直接从记事本++，不这样做（谢天谢地）。有人可以解释为什么这是发生，因为我最终将从本地主机运行。
这是HTML：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf = 8>
< title>标题< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =style.css>
< / head>
< body>
< header> header< / header>
< div class =wrapper> wrapper1< / div>
< div class =wrapper> wrapper2< / div>
< footer> footer< / footer>
< / body>
< / html>
以下是CSS：
html {
margin：0;
padding：0;
border：3px solid green;
}
body {
margin：0;
padding：0;
display：flex;
flex-direction：column;
border：3px solid lightblue;
height：100vh;
}
header {
flex：1;
height：50％;
background-color：red;
border：3px solid black;
}
.wrapper {
flex：1;
height：20％;
background-color：blue;
border：3px solid black;
}
footer {
height：5％;
position：absolute：
bottom：0;
background-color：orange;
margin：0;
padding：0;
}
这里是运行相同代码的图片，和另一个来自localhost：
感谢您对此事项的任何澄清。注意：以上是我试过的每个浏览器（Chrome，Firefox和Opera）的差异。
您提到了页脚的 position：absolute; 。
不应该，因为flex属性不再应用于块。
尝试对每个子项目使用flex，例如：
header，.wrapper {
flex： 3;
}
footer {
flex：1;
}
它适用于我。
In spite of setting all margins and padding to 0, I'm suddenly finding that processing my html & css using Prepros(also tried with XAMPP), is adding extra (unwanted) space under my last item ie. footer. While running the same html & css directly from Notepad++, does not do this (thankfully). Can someone please explain why this is happening since I will eventually be running from a local host. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>header</header>
<div class="wrapper">wrapper1</div>
<div class="wrapper">wrapper2</div>
<footer>footer</footer>
</body>
</html>
Here is the CSS:
html {
margin: 0;
padding: 0;
border: 3px solid green;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border: 3px solid lightblue;
height: 100vh;
}
header {
flex: 1;
height: 50%;
background-color: red;
border: 3px solid black;
}
.wrapper {
flex: 1;
height: 20%;
background-color: blue;
border: 3px solid black;
}
footer {
height: 5%;
position: absolute:
bottom: 0;
background-color: orange;
margin: 0;
padding: 0;
}
Here are images of the same code running, first from file:/// and the other from localhost:
Would appreciate any clarification on this matter. NOTE: Above is the discrepancy in every browser i tried it on (Chrome, Firefox and Opera).
I think it's because you mentionned a position: absolute; for the footer. You shouldn't, because flex property does not apply anymore on the block. Try the use flex for each children items, like:
header, .wrapper{
flex: 3;
}
footer{
flex: 1;
}
It works for me.
这篇关于Prepros / XAMPP在下一个div / footer下添加了不必要的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
