<body>
<div id = "wrapper">
<div id = "video">
</div>
</div>
<div id = "footer">
<div id = "footercontent">
</div>
</div>
</body>
*
{
margin: 0px;
padding: 0px;
}
.selfclear:after
{
content: ".";
float: left;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
html, body
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -343px; /* the bottom margin is the negative value of the footer's height */
width: 100%;
background: url( "images/landing_page_bg.png" );
}
#video
{
width: 940px;
height: 530px;
background: black;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
#footer
{
height: 343px; /* .push must be the same height as .footer */
background: url( "images/Landing_page_Footer.png" )no-repeat;
background-size: 100%;
background-color: black;
width: 100%;
}
#footercontent
{
height: 100%;
width: 1920px;
margin-left: auto;
margin-right: auto;
}
最佳答案
我不确定我是否理解您的问题，但是您需要首先解决几件事。
首先，在设置任何样式之前，应使用css重置。 Eric Myers' Reset可能是最常用的一种形式。
其次，您的格式错误，并且可能会导致奇怪的问题。
这是经过最少重置的清理代码：
<body>
<div id="wrapper">
<div id="video">
</div>
</div>
<div id="footer">
<div id="footercontent">
</div>
</div>
</body>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
* {-webkit-font-smoothing: subpixel-antialiased !important; text-rendering:optimizeLegibility;}
html {height:100%;}
.selfclear:after { /* not sure what this is being used for */
content: ".";
float: left;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper {
width: 100%;
height: auto !important;
margin-bottom: -343px; /* the bottom margin is the negative value of the footer's height */
/* Are you wanting for the footer to be pulled up and overlap your wrapper DIV? */
background: url('images/landing_page_bg.png') no-repeat 0 0;
}
#video {
width: 940px;
height: 530px;
margin: 100px auto 0 auto; /* You can include all margins in a shorthand statement ~ TOP RIGHT BOTTOM LEFT */
background: black;
}
#footer {
width: 100%;
height: 343px; /* .push must be the same height as .footer */
background: url('images/Landing_page_Footer.png') no-repeat 0 0;
/* background-size is NOT VALID or needed. Set the size of the container and repeat or no-repeat accordingly - background-size: 100%; */
background-color: black;
}
#footercontent {
width: 1920px;
height: 100%;
margin:0 auto; /* shorthand again TOP/BOTTOM LEFT/RIGHT */
}