почему внутреннее поле div имеет верхний край оболочки вместе с ним - PullRequest
Новая
       3

почему внутреннее поле div имеет верхний край оболочки вместе с ним

1 голос
/ 05 августа 2011 
<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;
}

1 Ответ

1 голос
/ 05 августа 2011

Я не уверен, что понимаю ваш вопрос, но есть пара вещей, которые вы должны рассмотреть в первую очередь.

Во-первых, вы должны использовать сброс CSS перед установкой любых стилей. Сброс Эрика Майерса , вероятно, наиболее часто используемый, в той или иной форме.

Во-вторых, у вас неправильное форматирование, которое само по себе может вызвать странные проблемы.

Вот очищенный код с минимальным сбросом: 

<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 */
    }
...