Блог

Главная - Вопросы по программированию - принудительный нижний колонтитул с адаптивным дизайном

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

#html #css

#HTML #css

Вопрос:

У меня есть нижний колонтитул, который прилипает к низу только тогда, когда страница длинная, но если страница слишком короткая, нижний колонтитул прилипает к середине страницы. Я видел несколько методов, в которых они устанавливаются margin:0 auto -180px; в .wrapper классе. Однако это может быть проблемой, поскольку высота моего нижнего колонтитула изменяется в зависимости от разрешения (адаптивный дизайн). также настройка .footer класса position:fixed; и bottom:0; работает, но затем она перекрывает содержимое длинных страниц.

Мой нижний колонтитул выполнен не на 100%, и я планирую сделать каждый из .item классов рядом на больших экранах, но друг под другом на меньших экранах, таких как телефоны. Это увеличит высоту нижнего колонтитула еще больше, поэтому у меня возникла проблема с установкой .footer .wrapper «статической» высоты высоты и поля.

css:

 .footer {
    width:100%;
    background-color:#23282c;
    position: relative;
    margin:auto;
    min-height:180px;
    z-index:15;
}

.footer-bottom-wrapper {
    display:inline-block;
    margin-bottom: 0;
    width:100%;
}
.footer-bottom {
    background-color:#1e2327;
    font-size:11px;
    line-height:25px;
    color:#777f8c;
    position:absolute;
    bottom:0;
    width:100%;
    height:25px;
    width:100%;
    z-index:9;
}



.item {
    position:absolute;
    left:220px;
    display:inline-block;
}

.i1 {
    position:relative;
    float:left;
    width:20%;
    padding-top:7px;
    margin-left:-210px;
    padding-right:190px;
    font-size:15px;
    display:inline-block;
}

.i2 {
    position:relative;
    float:left;
    width:20%;
    padding-top:7px;
    margin-left:-150px;
    padding-right:190px;
    font-size:15px;
    display:inline-block;
}

.i3 {
    position:relative;
    float:left;
    width:20%;
    padding-top:7px;
    margin-left:-150px;
    font-size:15px;
    display:inline-block;
}

.item h1 {
    color:#fff;
    border-bottom:1px solid #475f93;
    font-size:18px;
    text-align:left;
}

.item .p {
    color:#777f8c;
}

.footer-link {
    color:#777f8c;
    margin-left:5px;
    margin-right:5px;
}

.footer-link:hover {
    color:#fff;
}

оболочка и основной CSS:

 * { margin:0; padding:0; }
html { overflow:auto; height:100%; }
body { background-color: #e9ebee; margin:0; padding:0; font-size:10px; cursor:defau< height:100%; }
body, html {font:13px "open sans",sans-serif;  overflow-x:hidden;}

/* Base Styles
********************************************************************* */
html {
  font-size: 62.5%;
  width: 100%;
  height: 100%;
}
body {
  background: #e9ebee;
  height: 100%;
  font-size: 1.5em;
  line-height: 1.6;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #222;
  
}

footer.php:

 <footer class="footer" id="footer">

    <div class="item i1">
        <h1>Subscribe</h1>
        <div class="p">
            <form method="POST" action="/assets/php/subscribe.php">
                <label>Subscribe to our newsletter!</label><br />
                    <input type="email" class="footer-input" name="sub-email" placeholder="E-mail">
                
                <div style="margin-top:5px;"></div>
                    <input type="submit" value="Subscribe" class="btn" name="subscribe" style="width:100%;"/>
            </form>
        </div>
    </div>
    

    <div class="item i2">
        <h1>Help</h1>
        <div class="p">
            Need any help?<br />
            You can find a help page<a href="/help" class="footer-link">here</a>.
        </div>
    </div>

    
    <div class="item i3">
        <h1>Server</h1>
        <div class="p">
            About our server
        </div>
    </div>


    <div class="footer-bottom-wrapper">
        <div class="footer-bottom">
            <div class="fl">
                <a class="footer-link" href="/help">Help</a>    |
                <a class="footer-link" href="/ads">Advertise</a>    |
                <a class="footer-link" href="/Rules">Rules</a>  |
                <a class="footer-link" href="/Terms-Of-Service">Terms Of Service</a> |
                <a class="footer-link" href="/credit">Credits</a>
            </div>
            <div class="footer-fr" style="padding-right:10px;">amp;copy; Copyright <?php echo $domain; ?> | 2015 - <?php echo date("Y") ?></div>
        </div>
    </div>
</footer>

    <!-- Script that requier bottom! -->
        <script type="text/javascript" src="/assets/script/notification.js"></script>
        <script type="text/javascript" src="/assets/script/level-bar.js"></script>


<?php if(isset($_SESSION['user'])){ ?>
      </div>
<?php }else{ ?>
    </div>
<?php } ?>

Комментарии:

1. Вы должны использовать Google Гибкий липкий нижний колонтитул.

Ответ №1:

Я часто использую липкий нижний колонтитул position: absolute; с фиксированной высотой (например height: 120px; ) в режиме рабочего стола. Область содержимого должна padding-bottom соответствовать высоте нижнего колонтитула, чтобы предотвратить перекрытие.

В мобильном режиме нижний колонтитул меняется с position: absolute; на position: relative; , а высота теперь height: auto; . Также padding-bottom необходимо удалить из области содержимого.

 #content {
    padding-bottom: 120px;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
}
@media screen and (max-width: 767px) {
    #content {
        padding-bottom: 0;
    }
    #footer {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
    }
}

Базовый пример:

 html,
body {
  margin: 0;
  height: 100%;
}
#page {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
#header {
  height: 50px;
  background: yellow;
}
#content {
  padding-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: black;
  color: white;
}
@media (max-width: 400px) {
  #content {
    padding-bottom: 0;
  }
  #footer {
    position: relative;
    bottom: auto;
    left: auto;
    height: auto;
  }
}  
 <div id="page">
  <div id="header"></div>
  <div id="#content">small content</div>
  <div id="footer">footer content</div>
</div>

Комментарии:

1. После тестирования этого как на моем компьютере, так и на телефоне, кажется, что это лучшее решение. У меня уже есть css, в котором я меняю классы в зависимости от разрешения, поэтому я могу легко добавить это туда. Спасибо

Ответ №2:

Попробуйте установить минимальную высоту html и тела:

 html, body {
    min-height: 100%;
}

Является ли нижний колонтитул прямым дочерним элементом body?

Комментарии:

1. нет, не сработало. пробовал с обоими position:relative; , position:fixed; но ни один из них не сработал

2. OP нужен липкий нижний колонтитул с гибкой высотой.

Ответ №3:

Попробуйте это в своем css, возможно, это поможет вам. 

  html {
        min-height: 100%;
        position: relative;
    }
    .footer_box {
        bottom: 0;
        height: 70px;/*according to your height */
        position: absolute;
        width:100%;
        background-color:#23282c;
        position: relative;
        margin:auto;
        min-height:180px;
        z-index:15;
    }

Комментарии:

1. та же проблема, что и раньше, он прилипает к нижней части (точно так же, как присвоение fotter фиксированной позиции и bottom:0;), Но перекрывает класс .wrapper

Ответ №4:

Что я обычно делаю, так это использую position:fixed;bottom:0; , а затем добавляю margin-bottom:footerHeightInPixels; к любому последнему элементу на странице.

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

<link rel='stylesheet' media='screen and (max-width: 980px)' href='small.css' />
<link rel='stylesheet' media='screen and (min-width: 981px)' href='big.css' />