gpt4 book ai didi

html - 如何删除具有不同位置属性的两个标签之间的空格?

转载 作者:太空宇宙 更新时间:2023-11-04 09:38:26 25 4
gpt4 key购买 nike

body{
padding:0px;
margin:0px;
}

header{
width :100%;
background-color :orange;
height :60px;
}
main{
width:100%;
background-color :blue;
/*height :60px;*/
/*margin-top:60px;*/
height: calc(100% - 105px);

}
footer{
position :fixed;
bottom :0;
height:45px;
background-color :green;
width :100%;
}
<body>
<header> </header>
<main>
<p>content....!</p>
<p>content....!</p>
<p>content....!</p>
<p>content....!</p>
<p>content....!</p>
<p>content....!</p>
</main>
<footer> </footer>
</body>

在上面的代码中,我尝试创建 3 个区域内容区域、页眉区域和页脚区域。在这三个页脚区域中,页脚区域的位置为 property:fixed,其他区域不固定意味着如果有更多内容可以滚动。但这并没有像我预期的那样给我输出,它显示了一些额外的空白。我该如何解决这个问题?

最佳答案

首先,使用 CSS 重置删除所有默认边距和填充。

然后您需要将 htmlbody 元素设置为 height:100% 以获得您想要的效果。

min-height:100% 添加到 body 将允许添加其他内容。

* {
padding: 0px;
margin: 0px;
}
html,
body {
height: 100%;
}
body {
min-height: 100%;
}
header {
width: 100%;
background-color: orange;
height: 60px;
}
main {
width: 100%;
background-color: blue;
/*height :60px;*/
/*margin-top:60px;*/
height: calc(100% - 105px);
}
footer {
position: fixed;
bottom: 0;
height: 45px;
background-color: green;
width: 100%;
}
<header></header>
<main>
<p>content....!</p>
<p>content....!</p>
<p>content....!</p>
<p>content....!</p>
<p>content....!</p>
<p>content....!</p>
</main>
<footer></footer>

关于html - 如何删除具有不同位置属性的两个标签之间的空格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40128404/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com