CSS, чтобы нижний колонтитул HTML оставался в нижней части страницы с минимальной высотой, но не перекрывал страница
Я думаю, что проблема в том, что когда ваш мяч пересекается с площадкой, вы меняете знак компонента x вашего вектора скорости, но ваш шар все еще остается на площадке, поэтому в следующем кадре знак скорости снова меняется, в результате чего мяч оставаясь застрявшим на площадке.
Этот вид столкновений требует некоторого внимания, потому что вы столкнетесь с множеством крайних случаев.
2 ответа
Простой метод состоит в том, чтобы сделать тело 100% из Вашей страницы, с a min-height из 100% также. Это хорошо работает, если высота Вашего нижнего колонтитула не изменяется.
Дайте нижнему колонтитулу отрицательную граничную вершину:
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
Это известно как липкий нижний колонтитул. поиск Google для него придумывает много результатов. CSS А Липкий Нижний колонтитул является тем, который я использовал успешно. Но существуют больше.
css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>