html標簽和正文之間的奇怪空白
[英]Strange white space between html tag and body
問題描述
我試圖獲取全屏圖像背景，其中心具有可滾動的div，因此我編寫了以下代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bio</title>
<link href="../css/layout-base.css" rel="stylesheet">
<script type="text/javascript" src="../jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(window).ready(function(){
var background = $('#background');
var scrollable = $('#scrollable-container');
var halfWhite = $('#halfWhite');
var halfBlack = $('#halfBlack');
/* calcolo dimensione finestra */
var maxWidth = $(window).width();
var maxHeight = $(window).height();
/* settaggio dimensioni immagine sfondo */
background.css("height",maxHeight);
background.css("width",maxWidth);
scrollable.css("height",maxHeight);
/* settaggio dimensioni riempimento sfondo */
halfWhite.css("height",maxHeight);
halfWhite.css("width",maxWidth/2);
halfBlack.css("height",maxHeight);
halfBlack.css("width",maxWidth/2);
});
</script>
</head>
<body>
<div id="background">
<div id="halfWhite"></div>
<div id="halfBlack"></div>
<div id="scrollable-container">
<div class="content">
<a href="#" class="menu" id="home" target="_self"><img src="../media/index/bio1.png"/></a>
<a href="#" class="menu" id="events" target="_self"><img src="../media/index/events2.png"/></a>
<a href="#" class="menu" id="gallery" target="_self"><img src="../media/index/gallery3.png"/></a>
<a href="#" class="menu" id="disco" target="_self"><img src="../media/index/disco4.png"/></a>
</div><!--div content -->
</div>
</div><!-- div background -->
</body>
</html>
與相對的CSS：
body{
overflow:hidden;
margin:0!important;
}
#background{
background-image:url(../media/index/back.png);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
}
#halfWhite{
position:relative;
background-color: white;
z-index: -10;
float: left;
}
#halfBlack{
position:relative;
background-color: black;
z-index: -10;
float: right;
}
#scrollable-container{margin-left: 15%;margin-right: 15%;background-color:rgba(0,0,0,0.00)}
.content{
margin-top:1%;
height:100%;
position: relative;
padding-left: 5%;
padding-right: 5%;
box-shadow: -10px 2px 15px #dedede,10px -2px 15px #dedede;
-moz-box-shadow:-10px 2px 15px #dedede,10px -2px 15px #dedede;
-webkit-box-shadow:-10px 2px 15px #dedede,10px -2px 15px #dedede;
background-color:rgba(255,255,255,0.8);
}
.menu{width:15%}
.menu img{width:100%}
#home{position:absolute;top:0px;left:0px;}
#events{position:absolute;top:0px;right:0px;}
#gallery{position:absolute;bottom:0px;left:0px;}
#disco{position:absolute;bottom:0px;right:0px;}
結果看起來不錯，但是我注意到html標簽和正文之間有一個奇怪的空白...如何避免這種行為？ 可能是什么原因造成的？ 不幸的是，我在Web開發方面還很陌生，所以我什至不知道這是否是獲取此布局的正確方法。 有人有提示嗎？
3 個解決方案
解決方案1
2 已采納 2014-05-14 20:50:43
我的評論中提到的保證金問題使保證金下降
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
您可以從.content中刪除邊距頂部，並將padding-top添加到容器#scrollable-container
我不確定這是否是您要嘗試的操作，但我認為是
解決方案2
1 2014-05-14 20:42:53
您的問題是.content margin-top .content為1％（layout-base.css的第26行）
保證金有時會驅逐父母。
解決方案3
0 2014-05-14 20:44:06
#background{
margin:0;
background-image:url(../media/index/back.png);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
}
如果這樣不起作用，請嘗試擺脫margin-top:1%; 並在.content中將其清零
HTML主體下方的多余空白
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.