Page 1 of 1

Проблем с Sticky footer

Posted: Wed Jun 21, 2017 6:04 pm
by pro12
Това ми е html5 страницата [html]<!DOCTYPE html>
<html>
<head>
<title>The Sticky Footer Way</title>
<link rel='stylesheet' href='style.css'>
<meta name="viewport" content="width=device-width,initial-scale=1">

</head>
<body>
<header>
<nav>
<li>Your menu</li>
</nav>
</header>
<main class='wrapper'>
<section class="left">
left
</section >
<aside class="aside-right">
right
</aside> <div class='push'></div>
</main>

<footer class='footer'>This is my Footer</footer>
</body>
</html>[/html]
Това ми е css
[css]html, body {
height: 100%;
margin: 0;

}
.wrapper {
min-height: 100%;

margin-bottom: -100px;
}
header
{
width:100%;
height:66px; background: red;
}
.left
{
width:50%;
height:100%;
background: yellow;
float:left;
} .aside-right{
width:50%;
background: blue;
float: right; }
.footer,
.push {
height: 100px;
}
.footer {
background-color: #a12444;
}[/css]
Ако в лявата част имам дълг текст и мине през footer тои се вдига на горе.
Но ако премахна float:left; и float: right; footer си седи най отдолу на страницата, но не знам как да направя лявата и дясната част да изглеждат както трябва без float:left; и float: right;.

Posted: Thu Jun 22, 2017 4:06 am
by vinsbg
Пробвай с този css

Code: Select all

html &#123;
    position&#58; relative;
    min-height&#58; 100%;
&#125;
body &#123;
    margin&#58; 0 0 100px;
&#125;
.wrapper &#123;
    min-height&#58; 100%;
    margin-bottom&#58; -100px; 
&#125;
header &#123;
    width&#58;100%;
    height&#58;66px; background&#58; red;
 &#125;
.left &#123;
    width&#58;50%;
    height&#58;100%;
    background&#58; yellow;
    float&#58;left;
 &#125; 
 .aside-right &#123; 
    width&#58;50%;
    background&#58; blue;
    float&#58; right; 
 &#125;
footer &#123;
    background-color&#58; #a12444;
    position&#58; absolute;
    left&#58; 0;
    bottom&#58; 0;
    height&#58; 100px;
    width&#58; 100%;
&#125;
Ето и демо: https://jsfiddle.net/p0h1ag51/

Posted: Thu Jun 22, 2017 7:41 am
by Fakeheal
vinsbg wrote: Ето и демо: https://jsfiddle.net/p0h1ag51/
Само да предупредя, че с този начин, ако имаш текст (или някакви елементи) в лявата и дясната секция няма да се вижда от фуутъра.

Пример: https://jsfiddle.net/p0h1ag51/1/

Posted: Thu Jun 22, 2017 3:25 pm
by vinsbg
Fakeheal wrote:
vinsbg wrote: Ето и демо: https://jsfiddle.net/p0h1ag51/
Само да предупредя, че с този начин, ако имаш текст (или някакви елементи) в лявата и дясната секция няма да се вижда от фуутъра.

Пример: https://jsfiddle.net/p0h1ag51/1/
Правилно. Пропуснал съм го.

Не знам колко е "елегантно", но в този случай може един clear:both да се сложи:
https://jsfiddle.net/p0h1ag51/2/

Posted: Thu Jun 22, 2017 6:47 pm
by Fakeheal
Според мен ще е хубаво да е в <main>, а не извън него. Иначе е супер.

Posted: Thu Jun 22, 2017 7:34 pm
by pro12
С clear:both footer се вдига на горе. Image
Без clear:both footer си седи най отдолу на страницата.
Image
И по двата начина дългият текст в лявата част отива под footer

Posted: Fri Jun 23, 2017 4:02 am
by vinsbg
И на двете снимки се вижда, че <div class="clear"></div> си го сложил в main-a. Премести го извън мейна. Извън него при мен си работи, както на демото.


Image

Posted: Fri Jun 23, 2017 10:41 am
by pro12
Благодаря за помощта!