Нижний колонтитул не отображается внизу

Question

Нижний колонтитул не отображается внизу

0

По какой-то причине мой нижний колонтитул плавает в середине страницы. Вождение моего ума. Надеюсь, это просто быстро. Ive посмотрел онлайн, и все ответы, похоже, указывают на наличие фиксированного нижнего колонтитула, и я не хочу этого, поскольку он показывает ужасно в меньших разрешениях.

<!DOCTYPE html>
<html>
<head>
    <title>MM Web Design</title>
    <meta name="viewport" content="width=500, initial-scale=1">
    <link rel="stylesheet" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
    <img class="logo" src="img/logo.png">
        <div class id="nav">
            <ul>
            <li>Contact</li>
            <li>About</li>
            <li>Work</li>
            <li>Home</li>
        </ul>
    <br>
</div>


<div class="wrapper">
    <h1>Welcome to my Portfolio</h1>

    <p>
        yada yada yada
    </p>

        <div class="row">
            <div class="side-bar">
                <h3> Recent Work </h3>
                <p>Here some of my latest work, covering web design, branding and identity.</p>
                <a href="#">View the Portfolio &rarr;</a>
            </div>

        <div class="recent-wrap">
                <a href="#"><img src="img/body-metrix.png"></a>
                <a href="#"><img src="img/body-metrix-logo.png"></a>
                <a href="#"><img src="img/market.png"></a>
        </div>
        </div>

<div class="footer-wrap">
    <div class="footer">
        <ul>
            <li>Contact</li>
            <li>About</li>
            <li>Work</li>
            <li>Home</li>
        </ul>

        </div>
    </div>


</body>
</html>

CSS

.footer-wrap{
    height:50px;
    width:100%;
    background:#333333;
    margin: 0em;
}

.footer ul {
    font-size: 18px;
    font-weight: lighter;
    list-style-type: none;
    margin: 100px;
    padding: 0;
    text-decoration: none;
}

.footer ul li {
    float: right;
    display: block;
    padding-left: 20px;
    font-size: 0.75em; 
}

user3087394 16 апр. 2014, в 18:27

Источник

0

Пожалуйста, включите ваш CSS. Что именно вы пытаетесь достичь? Нижний колонтитул застрял в нижней части страницы, независимо от того, сколько там контента? Вы можете сделать один из них (поиск липкого нижнего колонтитула), не делая его "ужасным на меньших разрешениях".
TylerH 16 апр. 2014, в 16:03
0

@TylerH Мне просто нужно, чтобы нижний колонтитул следовал за всем на странице, чтобы он находился в нижней части страницы. Он действует так, как будто отсутствуют div-ы. Просто плавает в середине страницы в данный момент.
user3087394 16 апр. 2014, в 16:08
0

Хмммм ... Снято в темноте, но попробуйте добавить clear:both элемента нижнего колонтитула?
Niet the Dark Absol 16 апр. 2014, в 16:08
0

Я предполагаю, что вам нужно очистить все поплавки, которые у вас есть
Sam Holguin 16 апр. 2014, в 16:08
0

Можете ли вы выложить полный код в Codepen или jsfiddle, и я его отсортирую :)
Sam Holguin 16 апр. 2014, в 16:14

Показать ещё 3 комментария

Теги:

html

css

footer

2 ответа

Ещё вопросы

Пожалуйста, включите ваш CSS. Что именно вы пытаетесь достичь? Нижний колонтитул застрял в нижней части страницы, независимо от того, сколько там контента? Вы можете сделать один из них (поиск липкого нижнего колонтитула), не делая его "ужасным на меньших разрешениях".
@TylerH Мне просто нужно, чтобы нижний колонтитул следовал за всем на странице, чтобы он находился в нижней части страницы. Он действует так, как будто отсутствуют div-ы. Просто плавает в середине страницы в данный момент.
Хмммм ... Снято в темноте, но попробуйте добавить clear:both элемента нижнего колонтитула?
Я предполагаю, что вам нужно очистить все поплавки, которые у вас есть
Можете ли вы выложить полный код в Codepen или jsfiddle, и я его отсортирую :)

Intellidroid · Answer 1 · 2014-04-16T14-40-00.000Z

Дивы ведут себя так, как должны быть? И они правильно упорядочены. Как только вы заполните контент в предыдущем div, нижний колонтитул будет двигаться вниз. Если вы хотите, чтобы он оставался в нижней части окна, он должен быть липким, как уже было предложено.

Peege151 · Answer 2 · 2014-04-16T14-38-00.000Z

Скорее всего, он просто отображается ниже других div.

Попробуйте липкий нижний колонтитул?

  <div class="page-wrap">

  Content!

  </div>

  <footer class="site-footer">
  I'm the Sticky Footer.
  </footer>

и css

* {
   margin: 0;
    }
  html, body {
   height: 100%; 
  }
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px; 
 } 
.page-wrap:after {
 content: "";
 display: block;
 }
.site-footer, .page-wrap:after {
 /* .push must be the same height as footer */
 height: 142px; 
 }
 .site-footer {
 background: orange;
  }