Jump to content
  • 0

Подвал

Mirovich

Asked by Mirovich,

 Share

Question

Mirovich Explorer

Mirovich

Posted
Posted

Здравствуйте. О подвалах написано много но все же не проще ли

footer{ position:absolute; bottom:0;}

а у контентной части

margin: 0 0 -footer 0;

Чем пример ставший класикой

<!--<style type="text/css">

html, body {margin:0;height:100%;}

#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}

#header {height:200px;}

#left {float:left;width:200px;}

#right {float:right;width:200px;}

#center {margin:0 200px 0 200px;}

#spacer {height:100px;}

#footer {height:100px;margin-top:-100px;}

.clear {clear:both;}

</style>

<body>

<div id='wrapper'>

<div id='header'>

<!-- Содержимое хэдэра -->

</div>

<div id='container'>

<div id='left'>

<!-- Содержимое левой колонки -->

</div>

<div id='right'>

<!-- Содержимое правой колонки -->

</div>

<div id='center'>

<!-- Содержимое центральной колонки -->

</div>

</div>

<div class='clear'></div>

<div id='spacer'></div>

</div>

<div id='footer'>

<!-- Содержимое футера -->

</div>

</body>-->

Не понимаю в чем "соль" если только не выделять рамками div-ы в

<!--container-е-->

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Yazon_Nile Explorer

Yazon_Nile

Posted
Posted
footer{ position:absolute; bottom:0;} а у контентной части margin: 0 0 -footer 0;

Во-первых, тогда уже не -footer, а просто footer

А во-вторых зачем что-то делать с абсолютами, если по сути вы используете ту же структуру, просто другие стили чуток.

Link to comment
Share on other sites

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
Go to question listing

  • Similar Content

    • Jericho
      Footer - не работает подвал страницы
      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>
    • marriavass
      footer поверх map
      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>
        
    • Prana
      Как растянуть блок вниз до прижатого футера
      By Prana
      Здравствуйте. Подскажите, как можно растянуть блок вниз до прижатого футера, если высота страницы неизвестна ( т.е. чтобы на любых экранах блок касался футера) ???
    • TCAby
      2 footer'а и масштабирование ширины в Bootstrap 3
      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; 
    • kattiperk
      Как прижать футер к низу при наличии абсолютного блока
      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

  I accept