gpt4 book ai didi

html - 流体布局 - 使用边距顶部百分比时底部的空间

转载 作者:太空宇宙 更新时间:2023-11-04 12:54:54 24 4
gpt4 key购买 nike

所以我试图制作一个仅使用百分比的网站,但是在我的主要内容上,我使用了 margin-top: 10%,但它在底部留有间距并创建了一个滚动条。

http://i.imgur.com/ZJl8Zp0.png
如果您查看图像,您会注意到即使主要内容没有在页面下方扩展,但它仍然在下方创建空间(查看滚动条)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main"></div>
</body>
</html>


* {
margin: 0;
padding: 0;
}

html {
height: 100%;
width: 100%;
}

body {
height: 100%;
width: 100%;
background: pink;
position: relative;
}

.main {
margin-top:10%;
height: 600px;
width: 960px;
background: blue;
}

最佳答案

只需删除您在 CSS 中分配给 bodyheight: 100% 样式。应该是这样的:

body {
height: auto;
width: 100%;
background: pink;
position: relative;
}

关于html - 流体布局 - 使用边距顶部百分比时底部的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25923860/

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