Проблема с CSS Липкая реализация Нижнего колонтитула

Если у Вас есть Повышение затем с помощью BOOST_STATIC_ASSERT, способ пойти. Если Вы используете C или не хотите добираться, Повышение вот мой c_assert.h файл, который определяет (и объясняет работы), некоторые макросы для обработки статических утверждений.

Это является немного более замысловатым, которым это должно быть, потому что в ANSI C кодируют Вас, нуждаются в 2 различных макросах - тот, который может работать в области, где у Вас есть объявления и то, которое может работать в области, куда нормальные операторы идут. Существует также немного работы, которая входит в создание макро-работы над глобальной областью видимости или в области действия блока и наборе месива, чтобы гарантировать, что нет никаких коллизий имени.

STATIC_ASSERT() может использоваться в области действия блока объявления переменной или глобальной области видимости.

STATIC_ASSERT_EX() может быть среди регулярных операторов.

Для кода C++ (или кода C99, которые позволяют объявления, смешанные с операторами) STATIC_ASSERT() будет работать где угодно.

/*
    Define macros to allow compile-time assertions.

    If the expression is false, an error something like

        test.c(9) : error XXXXX: negative subscript

    will be issued (the exact error and its format is dependent
    on the compiler).

    The techique used for C is to declare an extern (which can be used in
    file or block scope) array with a size of 1 if the expr is TRUE and
    a size of -1 if the expr is false (which will result in a compiler error).
    A counter or line number is appended to the name to help make it unique.  
    Note that this is not a foolproof technique, but compilers are
    supposed to accept multiple identical extern declarations anyway.

    This technique doesn't work in all cases for C++ because extern declarations
    are not permitted inside classes.  To get a CPP_ASSERT(), there is an 
    implementation of something similar to Boost's BOOST_STATIC_ASSERT().  Boost's
    approach uses template specialization; when expr evaluates to 1, a typedef
    for the type 

        ::interslice::StaticAssert_test< sizeof( ::interslice::StaticAssert_failed<true>) >

    which boils down to 

        ::interslice::StaticAssert_test< 1>

    which boils down to 

        struct StaticAssert_test

    is declared. If expr is 0, the compiler will be unable to find a specialization for

        ::interslice::StaticAssert_failed<false>.

    STATIC_ASSERT() or C_ASSERT should work in either C or C++ code  (and they do the same thing)

    CPP_ASSERT is defined only for C++ code.

    Since declarations can only occur at file scope or at the start of a block in 
    standard C, the C_ASSERT() or STATIC_ASSERT() macros will only work there.  For situations
    where you want to perform compile-time asserts elsewhere, use C_ASSERT_EX() or
    STATIC_ASSERT_X() which wrap an enum declaration inside it's own block.

 */

#ifndef C_ASSERT_H_3803b949_b422_4377_8713_ce606f29d546
#define C_ASSERT_H_3803b949_b422_4377_8713_ce606f29d546

/* first some utility macros to paste a line number or counter to the end of an identifier
 * this will let us have some chance of generating names that are unique
 * there may be problems if a static assert ends up on the same line number in different headers
 * to avoid that problem in C++ use namespaces
*/

#if !defined( PASTE)
#define PASTE2( x, y) x##y
#define PASTE( x, y)  PASTE2( x, y)
#endif /* PASTE */

#if !defined( PASTE_LINE)
#define PASTE_LINE( x)    PASTE( x, __LINE__)
#endif /* PASTE_LINE */

#if!defined( PASTE_COUNTER)
#if (_MSC_VER >= 1300)      /* __COUNTER__ introduced in VS 7 (VS.NET 2002) */
    #define PASTE_COUNTER( x) PASTE( x, __COUNTER__)   /* __COUNTER__ is a an _MSC_VER >= 1300 non-Ansi extension */
#else
    #define PASTE_COUNTER( x) PASTE( x, __LINE__)      /* since there's no __COUNTER__ use __LINE__ as a more or less reasonable substitute */
#endif
#endif /* PASTE_COUNTER */



#if __cplusplus
extern "C++" {   // required in case we're included inside an extern "C" block
    namespace interslice {
        template<bool b> struct StaticAssert_failed;
        template<>       struct StaticAssert_failed<true> { enum {val = 1 }; };
        template<int x>  struct StaticAssert_test { };
    }
}
    #define CPP_ASSERT( expr) typedef ::interslice::StaticAssert_test< sizeof( ::interslice::StaticAssert_failed< (bool) (expr) >) >  PASTE_COUNTER( IntersliceStaticAssertType_)
    #define STATIC_ASSERT( expr)    CPP_ASSERT( expr)
    #define STATIC_ASSERT_EX( expr) CPP_ASSERT( expr)
#else
    #define C_ASSERT_STORAGE_CLASS extern                  /* change to typedef might be needed for some compilers? */
    #define C_ASSERT_GUID 4964f7ac50fa4661a1377e4c17509495 /* used to make sure our extern name doesn't collide with something else */
    #define STATIC_ASSERT( expr)   C_ASSERT_STORAGE_CLASS char PASTE( PASTE( c_assert_, C_ASSERT_GUID), [(expr) ? 1 : -1])
    #define STATIC_ASSERT_EX(expr) do { enum { c_assert__ = 1/((expr) ? 1 : 0) }; } while (0)
#endif /* __cplusplus */

#if !defined( C_ASSERT)  /* C_ASSERT() might be defined by winnt.h */
#define C_ASSERT( expr)    STATIC_ASSERT( expr)
#endif /* !defined( C_ASSERT) */
#define C_ASSERT_EX( expr) STATIC_ASSERT_EX( expr)



#ifdef TEST_IMPLEMENTATION
C_ASSERT( 1 < 2);
C_ASSERT( 1 < 2);

int main( )
{
    C_ASSERT( 1 < 2);
    C_ASSERT( 1 < 2);

    int x;

    x = 1 + 4;

    C_ASSERT_EX( 1 < 2);
    C_ASSERT_EX( 1 < 2);



    return( 0);
}
#endif /* TEST_IMPLEMENTATION */
#endif /* C_ASSERT_H_3803b949_b422_4377_8713_ce606f29d546 */
5
задан mdc 11 July 2009 в 02:52
поделиться

3 ответа

Ваш HTML немного странный. Например, почему banner-bg обтекает все?

Тем не менее, чтобы использовать технику липкого нижнего колонтитула, вам нужно обернуть все, кроме нижнего колонтитула , в один DIV. Таким образом, ваш тег будет содержать только два верхних DIV - оболочку и нижний колонтитул . Все, что у вас есть, будет внутри этой оболочки DIV.

Обратите внимание, что липкий нижний колонтитул может не работать для вас, если фоновые изображения, которые вы используете, включают прозрачные области, поскольку он полагается на фон оболочки , закрываемый заголовком.

Обновление: Хорошо, вот версия, которая работает. Таблица стилей «Sticky Footer» взята с cssstickyfooter.com и должна работать во всех современных браузерах. Я немного оптимизировал ваш HTML (нет необходимости в отдельных фоновых слоях на основе вашего изображения), но вы можете изменять его по своему усмотрению, если вы сохраняете базовую структуру на месте. Кроме того, поскольку у меня нет ваших изображений, я добавил сплошные цвета фона в иллюстративных целях, вам нужно удалить их.

<html>
<head>
 <style>
* {margin: 0; padding: 0} 
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px}  /* must be same height as the footer */
#footer {position: relative;
  margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0;   clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */ 

/* Do not touch styles above - see http://www.cssstickyfooter.com */

body {
  background-image: url("Images/img.gif");
  background: #99CCFF;
  color: #FFF;
  font-size: 13px;
  font-weight: normal;
  font-family: verdana;
  text-align: center;
  overflow: auto;
}

div#banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9em;
  background: url("Images/img2.gif") repeat-x;
  background: #000;
}

div#wrap {
  background: #666;
  width: 84em;
  margin-left: auto;
  margin-right: auto;
}

div#header {
  height: 16em;
  padding-top: 9em; /* banner height */
  background: url("Images/header/header-bg.png");
  background: #333; 
}

div#footer {
  background: #000;
  width: 84em;
  margin-left: auto;
  margin-right: auto;
}

 </style>
</head>
<body>
 <div id="banner">Banner</div>
 <div id="wrap">
    <div id="main" class="clearfix">
     <div id="header">Header</div> 
     <div id="content">
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content
   </div> <!-- end content -->
    </div> <!-- end main -->
 </div>
 <div id="footer">
  Footer
 </div>
</body>
</html>
5
ответ дан 14 December 2019 в 13:44
поделиться

Вместо изменения существующих стилей (или использования CSS Sticky Footer) мне намного проще просто переделать его. Итак, начнем:

<html>
<head>
<style type="text/css">
html, body {
    height: 100%;
}
#container {
    height: 100%;
    margin: 0 0 -200px 0;
    position: relative;
}
#footer {
    position: relative;
    height: 200px;  
}

</style>
</head>
<body>

<div id="container">
    <div id="header">Oh Beautiful Header</div>
    <div id="content">Lots of Content</div>
</div>
<div id="footer">Stay Put Little Footer</div>
</body>

В основном отрицательное поле должно соответствовать высоте нижнего колонтитула, высота 100% должна быть применена к html / body, а относительная позиция должна быть объявлена.

Также в отношении xHTML обратите внимание как div "нижний колонтитул" находится не ВНУТРИ блока "контейнер", а, скорее, вне его (так что есть 2 отдельных контейнерных div, контейнер и нижний колонтитул).

Если у вас все еще есть проблемы, основной проблемы с вашей разметкой IS:

  • 100% высота должна быть объявлена ​​для html и тега body.
  • отсутствует отрицательное поле для контейнера div, который является # banner-bg
  • , если высота нижнего колонтитула 100 пикселей, # banner-bg должен иметь нижнее поле: color: #00FFFF; background-image: url("Images/img.gif"); font-size: 1em; font-weight: normal; font-family: verdana; text-align: center; padding: 0; margin: 0; height: 100%; } #banner-bg { width: 100%; height: 100%; background-image: url("Images/img2.gif"); background-repeat: repeat-x; position: relative; margin: 0 0 -200px 0; } #wrapper { width: 84em; margin-left: auto; margin-right: auto; } #header-bg { height: 16em; background-image: url("Images/header/header-bg.png"); } #content-bg { background-image: url("Images/img3.png"); background-repeat: repeat-y; } #content { margin-right: 2em; margin-left: 2em; } #footer { position: relative; height: 200px; }

and the rest:

    <body>
          <div id="banner-bg">
            <div id="wrapper">
              <div id="header-bg">
                <!-- header stuff -->
              </div> <!-- end header-bg -->
              <div id="content-bg">
                <div id="content">
                  <!-- content stuff -->
                </div> <!-- end content -->
              </div> <!-- end content-bg -->
            </div> <!-- end wrapper -->
          </div> <!-- end banner-bg -->
          <div id="footer">
          Footer Content
          </div>
        </body>
</html>
1
ответ дан 14 December 2019 в 13:44
поделиться

Я не уверен, что имел в виду Sticky Footer, когда контент на самом деле длиннее, чем высота вашей страницы ... Если он должен парить над текстом во время прокрутки, я бы использовал Javascript для вычисления нижних координат и размещения нижнего колонтитула на новом слое в фиксированном положении. Это также можно сделать достаточно кроссбраузерным ...

0
ответ дан 14 December 2019 в 13:44
поделиться
Другие вопросы по тегам:

Похожие вопросы: