Home>
This is a 2-column layout homepage.
The footer is not displayed properly. What should I do? The code looks like this:
When the browser is shortened, it is displayed normally, but when the size is increased, it is not displayed normally.
<DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Practice</title>
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/slicknav.min.css">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.4/css/all.css">
<link rel = "stylesheet" href = "css/style.css">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
</head>
<body>
<header>
</header>
<nav>
<ul>
<li>Top</li>
<li>Introduction</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</nav>
Oh ah
</article>
Good
</aside>
<footer>
<p>UuUu</p>
</footer>
<script src = "js/jquery-3.4.1.min.js"></script>
<script src = "js/jquery.slicknav.min.js"></script>
<script src = "js/script.js"></script>
</body>
</html>
</DOCTYPE>
@ charset "utf-8";
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
background-color: black;
overflow: hidden;
}
/ * Back button on the page * /
#page_top {
width: 80px;
height: 80px;
position: fixed;
right: 0;
bottom: 0;
opacity: 0.6;
}
#page_top a {width: 80px;
height: 80px;
text-decoration: none;
}
#page_top a :: before {
font-family: 'Font Awesome 5 Free';
font-weight: 700;
content: '\ f139';
font-size: 60px;
color: # 00c8c8;
}
@media screen and (max-width: 750px) {
#page_top {
width: 80px;
height: 80px;
position: fixed;
right: 0;
bottom: 0;
opacity: 0.6;
}
}
/* header */
header {
width: 960px;
background-color: antiquewhite;
margin: 0 auto 0 auto;
}
header img {
}
@media screen and (max-width: 750px) {
header img {
width: 0;
height: 0;
}
}
/ * Set navigation area * /
nav {
text-align: center;
width: 960px;
background-color: azure;
margin: 0 auto 0 auto;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
text-align: center;
text-decoration: none;
width: 130px;
line-height: 70px;
overflow: hidden;
font-size: 24px;
font-weight: bold;
color: black;
background-color: aqua;
}
#menu {
display: none;
}
nav ul li a: hover {
background-color: black;
color: white;
}
@media screen and (min-width: 750px) {
#menu {
display: block;
}
.slicknav_menu {
display: none;
}}
.slicknav_menu: before {
width: 180px;
height: 50px;
float: left;
background-image:;
background-repeat: no-repeat;
background-position: center left;
background-size: 100%;
content: "";
margin: 0 0 0 19px;
}
.slicknav_menu {
width: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 10000;
background-color: # 280000;
}
/* Text */
#main {
width: 960px;
margin: 0 auto 0 auto;
overflow: hidden;
}
article {
width: 760px;
background-color: beige;
padding: 0 0 1000px 0;
float: left;
}
article h1 {
font-size: 100px;
}
@media screen and (max-width: 750px) {
article {
width: 100%;
margin: 60px 0 0 0;
}
}
/ * aside * /
aside {
width: 200px;
background-color: blanchedalmond;
margin: 0;
float: right;
}
aside img {
display: inline-block;
width: 200px;
}
@media screen and (max-width: 750px) {
aside {
width: 100%;
}
aside img {
width: 27%;
}
/ * footer * /
footer {
clear: both;
width: 960px;
margin: 0 auto;
background-color: white;
}
footer p {
font-size: 60px;
}
-
Answer # 1
Related articles
- css3 - bootstrap does not display footer full width, bottom floats
- python - def to display the number of products correctly
- css3 - we have created a footer library with dreamweaver
- css3 - display: flex;is not reflected
- javascript - i want to display correctly the element that is displayed correctly only when the windows size is changed
- css3 - i have set it to display: block;but it is not displayed
- css3 - the width is the same% but the display is different
- css3 - "the case where the same code makes a difference in display" and "the case where bootstrap does not work p
- css3 - when i applied display: flex, the image shrank greatly, creating an extra gap
- css3 - why are the vertical and horizontal widths of the display screen different?
- r legend i want to display correctly
- css3 - during responsive site coding, display: block does not work well using media query
- css3 - cannot display background image
- css3 - the display changed when the css code in html was converted to an external file
- html - when the header and footer are fixed, i want to display the full screen even if the main content does not exist
- css3 - responsive display of flex-box
- css3 - i want to display a small svg image
- css3 - i want to display the image from below
- html5 - about footer display
- css3 - i want to display img, but it becomes "?"
Related questions
- javascript : How to filter elements by clicking?
- html - when specifying the image size
- css3 - i can't copy according to the model of the book
- html - i want to apply the css file created for the mobile terminal when responsive confirmation is made with the mobile termina
- html - about width specification to check with developer tools
- html - i want to make the quotation mark of the quotation (blockqoute) easy to understand and read
- javascript - coexistence of jquery refinement and pagination
- html - offset does not apply
- css3 - "100vw" will not work if it falls below a certain width at the time of responsiveness
- css3 - i'm using justify-content but it's not reflected
The media query part of
aside
is not closed, so I think the cause is that thefooter
relationship is also included.The DOCTYPE is
with
!
at the beginning, and further, the end tag () Is not required.