1 Тема від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 171
    • Репутація: 5739

Тема: Як зробити мінімальну висоту блока по розміру вікна?

ну от знаєте, щоб, футер був впритик до низу треба зробити. В мене ніяк воно не виходить, от моє творіння
html, css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="menu">
        <ul>
            <li><a href="">Элемент меню 1</a></li>
            <li><a href="">Элемент меню 2</a></li>
            <li><a href="">Элемент меню 3</a></li>
            <li><a href="">Элемент меню 4</a></li>
            <li><a href="">Элемент меню 5</a></li>
            <li><a href="">Элемент меню 6</a></li>
            <li><a href="">Элемент меню 7</a></li>
            <li><a href="">Элемент меню 8</a></li>
            <li><a href="">Элемент меню 9</a></li>
            <li><a href="">Элемент меню 10</a></li>
        </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
    </div>
    <div id="footer">footer</div>
</div>
</body>
</html>
body {
    background: url(http://subtlepatterns.com/patterns/ricepaper_v3.png) #ddd;
    font-family: Tahoma;
    margin: 0;
    height: 100%;
}

html {
    height: 100%;
    margin: 0px;
}

#wrapper {
    width: 650px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background: #f2f2f2;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    margin-bottom: 0;
    min-height: 100%;
}

#header {
    background: url(http://research.nodebox.net/data/media/header.jpg);
    width: inherit;
    height: 150px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}

#menu{
    float: left;
    width: 150px;
    font-size: 12px;
    position: absolute;
    left :0;
}
#menu ul {
padding-left: 20px;
margin-right: 10px;
}

#menu li{
    background: #aaa;
    margin-bottom: 5px;
    width: auto;
    list-style: none;
    height: 20px;
}

#content {
    width: 520px;
    margin-left: 150px;
    min-height: 350px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: inherit;
    height: 100px;
    background: #ccc;
    text-align: center;
}

2 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2107

Re: Як зробити мінімальну висоту блока по розміру вікна?

http://replace.org.ua/topic/1022/
http://ryanfait.com/sticky-footer/

Подякували: FakiNyan1

Replace вебсайт

3 Відповідь від Invader

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Як зробити мінімальну висоту блока по розміру вікна?

http://ryanfait.com/sticky-footer/

Цікаво.
Єдиний відомий мені спосіб:
CSS:

#wrapper {
    position: relative; /* div всередині якого розміщується нижній колонтитул. В даному випадку в ньому розм. весь вміст сторінки */
    /* ... */
}
#footer {
    position: absolute;
    color: red;
    bottom: 0;
    /* ... */
}
#footer span { 
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

HTML:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div id="wrapper">
<!-- ... -->
<div id="footer"><span>footer</span></div>
<!-- ... -->

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 171
    • Репутація: 5739

Re: Як зробити мінімальну висоту блока по розміру вікна?

Replace написав:

http://replace.org.ua/topic/1022/
http://ryanfait.com/sticky-footer/

а в мене з 

min-height: 100%;

якась проблема. Сам футер нормально приклеюється до низу, але якщо зменшувати вікно браузера, то футер все-одно залишається біля нижньої межі вікна браузера і затуляє весь контент, ну дивіться на скріншоти, будь-ласка
от вікно відкрито повністю і все виглядає нормально

▼Прихований текст

http://не-дійсний-домен/4Zwxh.jpg

от я його звузив

▼Прихований текст

http://не-дійсний-домен/4Zwzw.jpg

а от що буде, якщо потягати полосу прокрутки

▼Прихований текст

http://не-дійсний-домен/4ZwC9.jpg

а от стилі

body {
    background: url(http://subtlepatterns.com/patterns/ricepaper_v3.png) #ddd;
    font-family: Tahoma;
    margin: 0;
    height: 100%;
}

html {
    height: 100%;
    margin: 0px;
}

#wrapper {
    width: 650px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background: #f2f2f2;
    padding: 0px;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    margin-bottom: 0;
    min-height: 100%;
    height: 100%;
    margin-bottom: -100px;
}

#header {
    background: url(http://research.nodebox.net/data/media/header.jpg);
    width: inherit;
    height: 150px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}

#menu{
    float: left;
    width: 150px;
    font-size: 12px;
    position: absolute;
    left :0;
}
#menu ul {
padding-left: 20px;
margin-right: 10px;
}

#menu li{
    background: #aaa;
    margin-bottom: 5px;
    width: auto;
    list-style: none;
    height: 20px;
}

#content {
    width: 520px;
    margin-left: 150px;
    min-height: 350px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: inherit;
    height: 100px;
    background: #ccc;
    text-align: center;
}

5 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 171
    • Репутація: 5739

Re: Як зробити мінімальну висоту блока по розміру вікна?

нуу, значить, так, як мені тута нікхто не дапаміг, я сходив на інший форум. Мені там якийсь чювак дав якесь рішення, але воно не працює, так що я просто збільшив мін. висоту блока content і всьо!

6 Відповідь від Invader

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Як зробити мінімальну висоту блока по розміру вікна?

Спосіб який я навів не працює?

7 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 171
    • Репутація: 5739

Re: Як зробити мінімальну висоту блока по розміру вікна?

Invader написав:

Спосіб який я навів не працює?

да вже все ок, то я просто там намішав, всякої фігні, а зара повидаляв непотрібне і отак от кароч.