0

我试图获得一个全屏图像背景，其中心有一个可滚动的 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 开发还很陌生，所以我什至不知道这是否是获得此布局的正确方法。有没有人有一些提示？

4

3 回答 3

2

我的评论中提到的边距问题折叠边距

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

您可以从 .content 中删除边距顶部并将 padding-top 添加到容器中#scrollable-container

我不确定这是否是你想要做的，但我认为它是

于 2014-05-14T20:50:43.507 回答
1

您的问题是（layout-base.css 的第 26 行）margin-top上的 1%.content

利润率有时会被他们的父母挤出。

于 2014-05-14T20:42:53.043 回答
0 
#background{
margin:0;
background-image:url(../media/index/back.png);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
}

如果这不起作用，请尝试摆脱margin-top:1%;并将其归零.content

于 2014-05-14T20:44:06.673 回答