Если бы вам пришлось беспокоиться только о браузерах Firefox и Webkit, какой CSS вы бы использовали, чтобы нижний колонтитул в следующем HTML не поднимался над дном или экраном (и опускался бы ниже, если содержимое тела выдвигало его)? Примечание: Я не хочу добавлять какую-либо разметку на страницу.
<html>
<body>
<header>...</header>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
Вот несколько копий, вставка html.Как мне нужно изменить CSS, чтобы он работал?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
p {
margin-bottom: 10px;
}
article {
display: inline-block;
height: auto;
width: 69%;
}
aside {
display: inline-block;
height: auto;
width: 30%;
}
footer {
height: 30px;
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
<p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
<p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
</article>
<aside>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</aside>
<footer>
<span>Made by me.</span>
</footer>
</body>
</html>