Това ми е html5 страницата
Това ми е 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;.
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>
[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;.