как предотвратить наложение липкого нижнего колонтитула над содержимым при увеличении - PullRequest
Новая
       31

как предотвратить наложение липкого нижнего колонтитула над содержимым при увеличении

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

У меня есть эта веб-страница с липким нижним колонтитулом, и при слишком большом увеличении нижний колонтитул и его содержимое перекрывают вышеуказанный контент.Как я могу предотвратить это?вот ссылка:

http://www.hitone101.com/

Ответы [ 2 ]

2 голосов
/ 13 августа 2011

Дайте #footer стиль overflow: hidden;.

Не используйте фиксированную ширину для #footercontent!

Особенно, не слишком большое значение 1920px!

Помните, что ваши пользователи будут посещать все виды устройств, и их окна браузера могут быть развернуты не полностью.

Когда пользователи видят горизонтальную полосу прокрутки DOOM™ они покинут сайт, отправив сообщение.

Обновление для новой страницы:

Казалось, что это сочетание конфликтующих настроек ширины и полей;Я закончил с чистого сброса.

Попробуйте:
HTML: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <title> Hightone - Landing Page </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta name="title" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="http://fonts.googleapis.com/css?family=Noble" rel="stylesheet" type= "text/css">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="wrapper">
    <header id="header">&nbsp;</header><!-- #header-->
    <div id="content">
        <div id="logoholderDiv">
            <img src="images/logo.png">
        </div>
        <div id="videoDiv">
            <!--<img id = "xboxImg" src = "images/xbox.png" />-->
            <iframe src="http://www.youtube.com/embed/Ee0bWAwgCRE" allowfullscreen="">
            </iframe>
        </div>
    </div><!-- #content-->
</div><!-- #wrapper -->
<footer id="footer">
    <div id="footercontent">
        <a href="http://www.hitone101.com/index.html">ENTER SITE</a>
    </div>
</footer><!-- #footer -->
</body></html>


CSS: 

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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html {
    height: 100%;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
  /*  font: 12px/18px Arial, Tahoma, Verdana, sans-serif; */
    height: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width:              auto;
    min-width:          1000px;
    min-height:         100%;
    height:             auto !important;
    height:             100%;
    background:         url( "images/landing_page_bg.png" );
    border:             1px solid blue;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    height:             1px;
}

/* Middle
-----------------------------------------------------------------------------*/
#content {
    padding:            0 0 343px;
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
    margin:             -343px auto 0;
    min-width:          1000px;
    height:             343px;
    background:         url( "images/landing_page_footer.png" )no-repeat;
    background-size:    100%;
    background-color:   black;
}

.selfclear:             after {
    content:            ".";
    float:              left;
    display:            block;
    height:             0;
    clear:              both;
    visibility:         hidden;
}
#logoholderDiv {
    width:              150px;
    height:             142px;
    margin-left:        auto;
    margin-right:       auto;
}
#videoDiv {
    width:              650px;
    height:             551px;
    background:         url( "images/videobg.png" ) no-repeat;
    margin-top:         30px;
    margin-left:        auto;
    margin-right:       auto;
}
#videoDiv > iframe {
    width:              650px;
    height:             551px;
    margin-left:        auto;
    margin-right:       auto;
    border:             1px solid red;
}
#footercontent {
    height:             89%;
    background:         url( "images/footer_logo.png" ) 45.9% no-repeat;
    border:             1px solid brown;
    padding-top:        20px;
    margin-left:        auto;
    margin-right:       auto;
    overflow:           hidden;
}
#footercontent > a {
    padding:            0px 0px 0px 0px;
    text-align:         center;
    text-decoration:    none;
    color:              white;
    display:            block;
    font-size:          50px;
    width:              100%;
    margin:             10px auto 0px auto;
    border:             1px solid;
}
1 голос
/ 13 августа 2011

Ну, во-первых, нижний колонтитул должен быть position:fixed с bottom:0px. Чтобы предотвратить слишком частое наложение при изменении размера, вы можете установить его на% height.

...