Jump to content
  • 0

либо footer не сдвигается, либо правый сайдбар сдвигается


RockeT
 Share

Question

Здравствуйте, помогите пожалуйста найти ошибку, не могу разобраться.
В общем, я не могу сделать так, чтобы footer сдвигался если я добавляю больше текста в main, он (футер) либо на месте остаётся, либо если я в стилях main'у делаю абсолютную позицию, то сдвигается правый сайдбар. Вот мой html и css: http://jsfiddle.net/rwczq667/

Edited by RockeT
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Jericho
      Начал учить HTML для себя. Проблема в том, что сделал заголовок и таблицу, но, нужно чтобы текст был внизу таблицы. Сделал для этого подвал, но что-то не работает, все равно текст выше таблицы.
      —————--
       

      <!DOCTYPE html>
      <HTML>
      <HEAD>
          <meta charset="utf-8">
      <TITLE>Главная страница</TITLE>
      </HEAD>
      <BODY>
       <header>
          <H1> <center>Текст Заголовка ...</center> </H1>
      </header>
      <center>  
      <table border="100">
         <tr>
          <th>№</th>
          <th>Текст</th>
          <th>Текст</th>
          <th>Текст</th>
          <th>Время</th>
          <th>Текст</th>
         </tr> 
         <tr>
      <tr>
          <td>1.</td>
          <td>Текст</td><td>Текст</td><td>ОКР</td><td>17.20.34 - 18.07.2020</td><td>    </td>
      <tr>
          <td>2.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>3.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>4.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>5.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>6.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>7.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
        </tr>
      </center>
       </BODY>
        <footer>
         Тексdт
        </footer>
      </HTML>
    • By marriavass
      Помогите, пожалуйста, понять как разместить footer поверх map.  Я начинающий верстальщик и не могу понять как решить данную задачу.  Я пробовала с отрицательным margin-top для footer, тогда он залазит на div и в Chrome и Safari все отлично, но Firefox все съезжает.
      <main>
      /*много других тегов*/
        <section class="modal-map">
      /*форма*/
           <div>  <iframe src="https://www.google.com></iframe> </div>
         </section>
      </main>
        <footer>     
       </footer>
        
    • By Prana
      Здравствуйте. Подскажите, как можно растянуть блок вниз до прижатого футера, если высота страницы неизвестна ( т.е. чтобы на любых экранах блок касался футера) ???
    • By TCAby
      Делаю первый раз верстку под bootstrap — решил осваивать фреймворк и все такое. Проблема — «плывет» при сужении экрана. Он высокий, 400px, фоном стоит картинка. При сужении экрана столбцы, которые не помещаются по ширине, уходят вниз, но картинка не «размножается» по вертикали (вариант repeat-y не срабатывает так, как надо). Далее, под футером стоит еще одна строка (div height:80px) более темная по фону (в ней копирайты). При сужении экрана она не уходит вниз под все выстроившиеся вертикально колонки footer, а остается «прилеплена» к нему снизу, таким образом частично закрывая столбцы футера.
      Вот нормальный футер, который задуман:

       
      А вот после сжатия экрана:

       
      В варианте position: absolute; bottom: 0; блок просто залипал внизу страницы, "наезжая" на другие блоки, идущие до самого низа. Это уже пробовал.. и absolute, и fixed.  Как вариант, видится мне в разных моделях девайсов делать разный CSS для footer.. но не знаю, как это сделать; и вопрос .bottomfooter тоже остается. Вот HTML (bootstrap настроен на 24 колонки, не на дефолтовые 12):        <footer>        <div class="container">            <div class="row">                    <section class="col-md-8 col-md-offset-1">                    <h3>Рассылка</h3>                       <!-- форма -->                    </section>                    <section class="col-md-6">                    <h3>Контакты</h3>                       <!-- контент -->                      </section>                    <section class="col-md-8">                    <h3>Форма обратной связи</h3>                       <!-- форма -->                    </section>           </div>            </div>        </footer>        <div class="clearfix"></div>        <div class="bottomfooter">        <section class="col-md-6">              <!-- контент -->            </section>            <section class="col-md-12 text-center">              <!-- контент -->            </section>            <section class="col-md-5 text-right">              <!-- контент -->            </section>            <section class="col-md-1">            <!-- колонка-"заглушка" -->            </section>        </div>Вот CSS:.bottomfooter {height: 80px;padding: 10px 0;background-color: rgb(80,80,80);color: @text-color;font-size: @font-size-base;a {color: @text-color;}}footer {background-image: url('../images/footer-2.png');background-repeat: no-repeat;  color: #dbdbdb;  font-size: @font-size-base;.container { height: 400px;padding: 10px 0;  background: @panel-footer-bg; 
    • By kattiperk
      Здравствуйте.
       
      У меня вопрос: как прижать футер к низу, если есть абсолютный блок?
      Или я что-то пропустила, или уже не могу искать.
       
      Всегда пользовалась таким способом.
      Но без абсолютного блока.
       
      Если что, вёрстка тут.
       
      Спасибо, всем хороших футеров.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy