Home > Article > Web Front-end > How to make the head and tail fixed in html5
How to make the head and tail fixed in html5
- 青灯夜游Original
- 2022-04-25 14:30:564393browse
Fixing method: 1. Use the header tag to define the head content of the document, and add the "position:fixed;top:0;" style to make it fixed; 2. Use the footer tag to define the tail content, and add The "position: fixed;bottom: 0;" style makes it fixed.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
html5 Methods to keep the head and tail fixed:
1. Keep the head fixed
Use the header tag to define the header, and add the "position:fixed;top: 0;" style to make it fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
height: 1500px;
}
header {
width: 100%;
background-color: #FFC0CB;
position: fixed;
top: 0;
}
</style>
</head>
<body>
<header>
<h1>网站标题</h1>
</header><br><br><br><br><br><br><br>
<div>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div>
</body>
</html>
Instructions :
header: Tag defines the header of a "web page" or "section".
Usually contains h1-h6 elements or hgroups as the title of the entire page or a content block. You can also wrap the table of contents part of a section, a search box, a nav, or any related logo.
2. Keep the tail fixed
Use the footer tag to define the tail content and add the "position:fixed;bottom: 0;" style to make it Fixed
footer{
width: 100%;
height: 100px;
background-color: paleturquoise;
position: fixed;
bottom: 0;
}
<footer>
文档尾部内容
</footer>
Description:
footer tag: represents the footer of "web page" or "section".
Usually contains some basic information about the section, such as: author, related document links, and copyright information.
If the footer elements contain the entire section, then they represent appendices, indexes, promotions, license agreements, tags, categories, and other similar information.
Extended knowledge: fixed positioning:
When the position attribute of an element is set to fixed, the element is fixed, and the fixed element will not Changes position as the scroll bar is dragged. The position of fixedly positioned elements does not change within the field of view.
Fixed fixed positioning and absolute positioning are similar. They both allow elements to be displaced and separated from the document flow.
position:fixed; top:像素值; bottom;像素值; left:像素值; right:像素值;
"position:fixed;" is used in combination with the four attributes top, bottom, left and right. "position:fixed;" makes the element a fixed positioning element, and then uses top, bottom, The four attributes left and right are used to set the position of the element relative to the browser.
Not all of the four attributes top, bottom, left and right are used. Note that the reference objects of these four values are the four edges of the browser.
【Related recommendations: html video tutorial, web front-end】
The above is the detailed content of How to make the head and tail fixed in html5. For more information, please follow other related articles on the PHP Chinese website!