CSS: перекрытие нижнего колонтитула, другие сбои

Я искал похожие проблемы здесь и в других местах, но я не могу найти окончательного ответа. Когда я добавляю достаточно текста на страницу, которую он достигнет в нижнем колонтитуле, нижний колонтитул просто перекрывает текст. То же самое, если я уменьшу размер окна браузера, чтобы заставить нижний колонтитул и контейнер, содержащий контент, встретиться. Иногда это проявляется также и в "контейнере", например, в более светлой серой части, которая по какой-то причине сжимается, хотя она всегда должна подниматься на 100% от высоты.

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

Ниже мой CSS и JSFiddle, которые я сделал со всеми соответствующими частями страницы.

html, body {
    margin: 0;
    padding: 0;
}

html, body {
    background: #252525; 
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}

body {
    background: #363636;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    margin: 0 22.5%;
}

#container {
  color: white;
  margin-bottom: 2em;
  min-height: 100%;
  overflow: auto;
  padding: 0 2em;
  text-align: justify;
}

#footer {
  bottom: 0;
  color: #707070;
  height: 2em;
  left: 0;
  position: fixed;
  font-size: small;
  width:100%;
}

Макет типичной страницы

ОТВЕТЫ

Ответ 1

Измените это:

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

Демо

Ответ 2

См. DEMO

Я сделал некоторые изменения CSS. Взгляни. Надеюсь, это поможет вам.

Обновлен CSS

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}

Ответ 3

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

По сути, все, что вам нужно сделать, это установить <body> в:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Затем примените команду flex:1 1 auto к "основной" или средней части, в данном случае к #container, который будет расширяться по вертикали, чтобы заполнить доступное пространство, гарантируя, что нижний колонтитул будет придерживаться нижней части:

#container {
      flex: 1 1 auto;  /*grow vertically*/
}

Мы добавили align-items:center в гибком родительском элементе для обработки центрирования по оси (в нашем случае, горизонтального).

Вот пример приведенного выше фрагмента:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #252525;
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container {
  color: white;
  background: #363636;
  padding: 2em;
  background: #363636;
  flex: 1 1 auto;
  /*grow vertically*/
  width: 55%;
  text-align: center;
}

#footer {
  color: #707070;
  height: 2em;
  font-size: small;
}
<body>
  <div id="container">
    <h1>A webpage</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
      nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
    <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
      libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
  </div>
  <div id="footer">This is a footer.</div>
</body>

Ответ 4

Сначала напишите этот код

footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;

}

и теперь задайте медиа-запросы

@media only screen and (max-width: 767px){
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:static;
left:0;
bottom:0;
width:100%;

} }

надеюсь, что это вам поможет:)

Ответ 5

Я считаю, что вы искали липкий нижний колонтитул, который остается, хотя и не фиксируется в нижней части страницы (поэтому не перекрывается). Я хотел добавить этот ответ, потому что для меня (он работал), и он был ближе к тому, что я искал.

Решение

Решение происходит от Chris Bracco, и я подробно расскажу, что вам нужно для воспроизведения эффекта:

HTML

Ваш HTML выглядит следующим образом:

<html>

<body class="body-for-sticky">
    <...> your content </...>
    <div class="footer sticky-footer"> your footer </div>
</body>

</html>

CSS

Вам нужно добавить в свой css что-то вроде:

html {
    height: 100%;              /* for the page to take full window height */
    box-sizing: border-box;    /* to have the footer displayed at the bottom of the page without scrolling */
}

*,
*:before,
*:after {
    box-sizing: inherit;       /* enable the "border-box effect" everywhere */
}

.body-for-sticky {
    position: relative;        /* for the footer to move with the page size */
    min-height: 100%;          /* for the footer to be at the bottom */
    padding-bottom: 6rem;      /* Space available between last element and bottom border of the page */
}

.sticky-footer {
    position: absolute;        /* for it to disappear under last body element */
    bottom: 0;                 /* so the footer can stick to the bottom*/
}

Пример

Что, как основное, вам нужно создать липкий нижний колонтитул. Вот пример (с некоторыми CSS для лучшего рендеринга).

html {
      height: 100%;
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    .body-for-sticky {
      position: relative;
      min-height: 100%;
      padding-bottom: 6rem;
    }
    
    .sticky-footer {
      position: absolute;
      bottom: 0;
    }
    
/* for the rendering */

    body {
      margin: 0;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    
    .footer {
      right: 0;
      left: 0;
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }
    
    .demo {
      margin: 0 auto;
      padding-top: 64px;
      max-width: 640px;
      width: 94%;
    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Sticky footer</title>
    <style>  </style>
</head>

<body class="body-for-sticky">

  <div class="demo">
    <h1 style="margin-top: 0">CSS "Always on the bottom" Footer</h1>

    <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

    <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

    <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

    <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>

    <p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
  </div>

  <div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

</body>

</html>

Ответ 6

 #footer {
     z-index: 1;
     position: absolute;
     right: 0;
     bottom: 0;
     left: -25%;
     padding: 1rem;
     background-color: black;
     text-align: center;
     height: 3em;
     left: 0;
     font-size: small;
     width:100%;
 }