问题
i noticed that on my firefox the distance between the bottom of the website and the list for links(terms,about...) is really large, i cannot seem to figure out what to specify in my .ul style to adjust the spacing. i am using firefox. The mobile view is okay, i haven't checked it on my phone, i just used devtools.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="css/navr.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<header>
<span class="iconify" data-inline="false" data-icon="eva:arrow-back-fill" style="color: #63ba86; font-size: 24px; padding-top: 10px;">
</span>
<h1>Forgot password</h1>
</header>
<div class="line"></div>
<h1 class="big">Change your password</h1>
<h1 class="cer">Confirm your email address</h1>
<form action="#" class="formstyle" style="padding-top:10px;padding-left: 10px">
<input type=" text " placeholder="Enter your email address" required>
<li class="btnn"><button type="submit" class="conf">Confirm</button></li>
</form>
<footer class="cl">
<div class="liner"></div>
<ul>
<li>
<a href="# " class="link ">Terms</a>
<a href="# ">Privacy</a>
<a href="# ">About</a>
</li>
</ul>
</footer>
</div>
</body>
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js "></script>
</html>
My css
body {
background-color: #FFFFFF;
margin: 0;
}
@media screen and (max-width: 30em) {
.line {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
}
.liner {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
}
header {
display: flex;
}
h1.cer {
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 10px;
color: #356B51;
padding-left: 10px;
}
h1.big {
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 29px;
color: #63BA86;
padding-left: 10px;
}
h1 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #63BA86;
padding-left: 70px;
margin-top: 10px;
}
a {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #63BA86;
text-decoration: none;
margin: 4px;
}
ul {
display: flex;
justify-content: flex-end;
text-decoration: none;
list-style: none;
}
h2 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 29px;
color: #63BA86;
padding-left: 10px;
}
input {
width: 300px;
height: 35px;
border: 0.5px solid #63BA86;
border-radius: 5px;
font-family: Montserrat;
padding-left: 5px;
}
input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
/* ::-webkit-input-placeholder {
text-align: center;
}
input::-moz-placeholder {
margin-left: 5px;
}
input:-moz-placeholder {
padding-left: 40px;
} */
button {
margin-top: 10px;
height: 25px;
width: 87px;
border: 0.5px solid #63BA86;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
button.conf {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 17px;
color: #FFFFFF;
background-color: #67E298;
}
footer.cl {
padding-top: 400px;
}
main {
flex: 1;
}
li.btnn {
list-style: none;
}
}
@media screen and (min-width: 30em) {
.line {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
}
header {
display: flex;
}
h1 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #63BA86;
margin-top: 10px;
padding-left: 500px;
}
h1.cer {
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 10px;
color: #356B51;
padding-left: 460px;
}
h1.big {
font-style: normal;
font-weight: 500;
font-size: 40px;
line-height: 29px;
color: #63BA86;
padding-top: 200px;
padding-left: 450px;
}
li.btnn {
list-style: none;
display: block;
padding-left: 440px;
}
a {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #63BA86;
text-decoration: none;
margin: 1rem;
}
ul {
display: flex;
justify-content: flex-end;
text-decoration: none;
padding-left: 10rem;
list-style: none;
}
li {
text-align: left;
margin: 10px;
}
link {
margin: 10px;
font-size: large;
}
input {
width: 300px;
height: 35px;
border: 0.5px solid #63BA86;
border-radius: 5px;
font-family: Montserrat;
padding-left: 5px;
margin-left: 450px;
}
input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
/* ::-webkit-input-placeholder {
text-align: center;
}
input::-moz-placeholder {
margin-left: 5px;
}
input:-moz-placeholder {
padding-left: 40px;
} */
button {
margin-top: 10px;
height: 25px;
width: 87px;
border: 0.5px solid #63BA86;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
button.conf {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 17px;
color: #FFFFFF;
background-color: #67E298;
}
.liner {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
margin-top: 40px;
}
}
回答1:
i noticed that on my firefox the distance between the bottom of the website and the list for links(terms,about...) is really large
This is the nature of the webpage you have created because the content only goes as far as that height. In order for your footer element to stay at the bottom: I recommend utilizing Flexbox & setting margin-top: auto to your footer. In order for the margin to kick in, simply give your container (in this case, .body) the flex display property & a minimum height of 100vh (so that it takes at least 100% of the viewport in terms of height) and assign column as it's flex-direction. This way, the footer can always stay at the bottom on your given layout.
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
footer.cl {
margin-top: auto;
}
回答2:
I have made a few changes in your code. hope this will help you.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<span class="iconify" data-inline="false" data-icon="eva:arrow-back-fill"
style="color: #63ba86; font-size: 24px; padding-top: 10px;">
</span>
<h1>Forgot password</h1>
<div class="dummy"></div>
</header>
<div class="content">
<h1 class="big">Change your password</h1>
<h1 class="cer">Confirm your email address</h1>
<form action="#" class="formstyle" style="padding-top:10px;padding-left: 10px">
<input type=" text " placeholder="Enter your email address" required>
<div class="btnn"><button type="submit" class="conf">Confirm</button></div>
</form>
</div>
<footer class="cl">
<div class="liner"></div>
<ul>
<li>
<a href="# " class="link ">Terms</a>
<a href="# ">Privacy</a>
<a href="# ">About</a>
</li>
</ul>
</footer>
</div>
</body>
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js "></script>
</html>
CSS:
body {
background-color: #FFFFFF;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #E5E5E5;
}
h1 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
color: #63BA86;
}
h1.big {
font-style: normal;
font-weight: 500;
color: #63BA86;
text-align: center;
}
h1.cer {
font-style: normal;
font-weight: 300;
color: #356B51;
text-align: center;
}
h2 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
color: #63BA86;
}
form {
margin: auto;
text-align: center;
}
input {
width: 300px;
height: 35px;
border: 0.5px solid #63BA86;
border-radius: 5px;
font-family: Montserrat;
padding-left: 5px;
}
input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
button {
margin-top: 10px;
padding: 10px 35px;
border: 0.5px solid #63BA86;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.btnn {
text-align: center;
}
button.conf {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
background-color: #67E298;
}
ul {
display: flex;
justify-content: flex-end;
text-decoration: none;
list-style: none;
}
li {
text-align: left;
margin: 10px;
}
link {
margin: 10px;
font-size: large;
}
a {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #63BA86;
text-decoration: none;
margin: 1rem;
}
@media screen and (max-width: 30em) {
h1.big {
font-size: 20px;
line-height: 29px;
}
h1 {
font-size: 18px;
line-height: 22px;
}
h1.cer {
font-size: 12px;
line-height: 10px;
}
h2 {
font-size: 18px;
line-height: 29px;
}
form {
width: 90%;
}
button.conf {
font-size: 12px;
line-height: 17px;
}
footer.cl {
border-top: 1px solid #E5E5E5;
}
}
@media screen and (min-width: 30em) {
h1 {
font-size: 18px;
line-height: 22px;
}
h1.big {
font-size: 40px;
line-height: 29px;
}
h1.cer {
font-size: 12px;
line-height: 10px;
}
form {
width: 50%;
}
button.conf {
font-size: 12px;
line-height: 17px;
}
.liner {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
margin-top: 40px;
}
}
JSFiddle: https://jsfiddle.net/Danielprabhakaran_N/7t8qk69b/3/
回答3:
As promised, a complete overhaul of your code. Essentially I simplified your HTML a bit and fully recreated the CSS to make the page fully responsive without the use of @media queries or any external framework.
- introduced use of
box-sizing: border-boxfor all elements - main structure uses flexbox layout
- introduced banding attributes ([band]) for easy construction of 'Landing Page' layout
- inserted responsive page T/L/B/R spacing
- used linear equations (y=mx+b) to calculate sizes for responsiveness (mainly fontsizes and element spacing)
- now only uses em and rem for sizes where applicably, removed all uses of px
- etc... (completion of this list with external references is pending)
Examples of
- hover manipulation
- using predefined Unicode icon as alternative to iconify JS (prevents load delay)
- used inline SVG as an alternative icon to serve Android
Tested both landscape and portrait layout
- Works on latest Chrome, Edge, Firefox and IE11 (and IE10 simulated)
- And Android 9+, Samsung Galaxy J4+, 360x740 (Chrome, Firefox and default browser)
- With minimum fit 320x320, maximum fit 1920x1200
Update
Use of Unicode does not seem to work on Android (or with some workaround), added inline SVG as an alternative. Idea behind it: loading some JS which in turn loads a single icon seems a bit overkill (not to mention s l o w)... SVG works on Android!
The Snippet (on SO full-page view required)
<!--
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js">// this JS disabled</script>
-->/*****************************/
/* my preferred global rules */
/*****************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, * { box-sizing: inherit }
/*
Above CSS defines ALL elements to use 'border-box'
Defining `box-sizing: border-box` will make calculation/manipulating element sizes
much easier as (usually) you would want to know the width/height of an element
including its inner spacing ('padding') and border.
=> element width/height = content width/height + padding + border
Default CSS is 'box-sizing: content-box'
=> element width/height = content width/height
'margin' is never part of an element width/height, so use sparsely!
Own the boxmodel knowledge (MDN): https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
w3schools 'CSS box-sizing Property': https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
*/
/*
All math reference: https://www.mathsisfun.com/equation_of_line.html
*/
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
/* Simple banding attribute for use in 'Landing Page' layout */
[band] { display: flex; flex-flow: column wrap; }
[band*="cols"] { flex-direction: row } /* horizontally oriented container */
[band*="rows"] { flex-direction: column } /* vertically oriented container */
[band],[centered] { justify-content: center; align-content: center; align-items: center }
body[padded="1"],
body[padded="0"] [band*="padded"] {
/*
responsive page padding
and responsive band padding (same as responsive page padding, but at band level)
Top/Bottom padding: p1(320,16) p2(1920, 72) => 0.035x + 4.8 => vary from 16 to 72px
Left/Right padding: p3(320, 8) p4(1920,320) => 0.195x - 54.4 => vary from 8 to 320px
'Band padding' is only active when 'page padding' is off (0)
*/
padding: calc(3.5vh + 4.8px) calc(19.5vw - 54.4px);
}
/* prohibit user from selecting text (put in <body>), esp. convenient for 'click-happy' users... */
[no-select] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
[do-select] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: auto }
/* enable user to select text (put in specific elements) */
/* for debugging */
[outlines="1"] * { outline: 1px dashed }
/* YOUR CODE */
/*
Favouring 'mobile' only requires @media queries when you need
to override/modify CSS values for other (larger) devices.
- for the main design I used my Samsung J4+, 360x740
- and as large device my desktop display, 1920x1200
- smallest fit test 320x320 (Smartwatch? With a browser??? Okay...)
- and width 480px
*/
/*************************************/
/* First: setup the main page layout */
/*************************************/
/*
<body> contains a main 'page-wrapper'
with three distinct zones below each other,
(which I have designated to be a [band]):
- header
- content
- footer
[band] is a vertically oriented flexbox container
which centers all its child elements.
<body padded="0"> which means that page spacing is
done at [band="padded"] level.
*/
/******************************/
/* override some CSS defaults */
/******************************/
body { margin: 0 } /* remove default <body> spacing */
a { margin: 0; color: inherit; text-decoration: none }
button { display: block }
body {
height: 100vh; /* full viewport height */
/* all elements inherit below style */
font-size: 1rem; /* make it :root fontsize dependend */
/* which, in turn, is viewport size dependend */
font-family: Montserrat, Arial, Helvetica, sans-serif;
/* with fallbacks for slow/none loading fonts */
font-weight: 500; /* the preference for 'Montserrat' */
color: rgba(99,186,134,1);
/* default is 'Black', but most text is (#63ba86 greenish) */
/* converted to rgba so its transparency can be changed/manipulated */
}
.page-wrapper { /* main container holding all page content */
display: flex; /* it's not a [band], so define FBL */
flex-direction: column; /* of 3 container rows */
justify-content: space-between; /* pushes header/footer apart */
height: 100%; /* full parent height (<body>) */
}
/* .page-wrapper row 1 */
header {
padding: 0.25rem 0; /* instead of '[band="padded"]' */
font-size: 1.125em;
border-bottom: 1px solid rgba(0,0,0,0.1); /* #e5e5e5 */
}
header .text, header .iconify {
margin-right: auto
}
header .iconify {
font-size: 0.9em; margin-left: .5rem;
}
/* Unicode font assignment, does not show on Android! */
[utf] { font-family: serif }
/* icons from Unicode Group 'Supplemental Arrows-C' (https://unicode.org/charts/nameslist/) */
.iconify[utf="1F804"]:before {
content: '\1F804'; /* 1F804 🠄 Leftwards Arrow With Medium Triangle Arrowhead */
}
/* some other arrow, same Group */
.iconify[utf="1F808"]:before {
content: '\1F808'; /* 1F808 🠈 Leftwards Arrow With Large Triangle Arrowhead */
}
/* Inline SVG alternative (see end of document) */
.iconify.svg {
display: inline-block;
width : 0.9em;
height: 0.9em;
vertical-align: -0.1125em; /* 0.9 * -0.125 */
fill: currentColor; /* CSS color keyword */
}
/* .page-wrapper row 2 */
.content {
height: 100%; /* full available vertical FBL space (between header/footer) */
}
form {
padding: calc(3.5vh + 4.8px); /* inner spacing */
}
form>* {
margin: .6rem 0; /* element T/B outer spacing */
width: 100%;
}
.big {
font-size: calc(2.5vmin + 12px); /* (320,20)(1280,44) */
line-height: 1.45; /* original 29/20 */
}
.cer {
margin-bottom: .0625rem;
font-weight: 300;
font-size: 0.631rem; /* was 12px */
line-height: 1;
color: rgba(53,107,81,1); /* #356B51 */
}
button, input {
height: 1.875rem;
line-height: 1.45;
font-weight: bold;
border: 1px solid rgba(99,186,134,1);
border-radius: 0.25rem; /* 5px-ish */
}
button, input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
input { padding: 0 .25rem }
button { height: 1.875em; margin-left: auto }
button.conf {
width: 4.5rem;
color: rgba(255,255,255,1); /* White */
background-color: rgba(103,226,152,1) /* lighter green */
}
/* .page-wrapper row 3 */
footer {
border-top: 1px solid rgba(0,0,0,0.1); /* #e5e5e5 */
}
footer a {
font-size: 0.75em;
line-height: 1.214; /* original 17/14 */
margin: calc(1.25vmin + 2px); /* (320,6)(1280,18) */
}
/* for testing (and a bit of fun...just put dots before 'form' to disable) */
form {
background-color: rgba(0,0,0,.05);
/* GMC elevation 1dp */
box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
0px 1px 1px 0px rgba(0,0,0,.14),
0px 1px 3px 0px rgba(0,0,0,.12);
}
form:hover {
transform: scale(1.01);
/* GMC elevation 3dp */
box-shadow: 0px 3px 3px -2px rgba(0,0,0,.20),
0px 3px 4px 0px rgba(0,0,0,.14),
0px 1px 8px 0px rgba(0,0,0,.12);
}
form:active { transform: scale(1) }
/**/<body outlines="0" padded="0" no-select>
<div class="page-wrapper">
<header band="cols">
<!-- div class="iconify" data-inline="false" data-icon="eva:arrow-back-fill"></div -->
<!-- div class="iconify" utf="1F804"></div -->
<svg class="iconify svg"><use xlink:href="#eva-arrow-back-fill"/></svg>
<div class="text">Forgot password</div>
</header>
<div class="content" band>
<form action="#" class="formstyle">
<div class="big">Change your password</div>
<div class="cer">Confirm your email address</div>
<input type="text" placeholder="Enter your email address" required>
<button type="submit" class="conf">Confirm</button>
</form>
</div>
<footer band="padded.cols">
<a href="javascript:void(0)">Terms </a><!-- javascript:void(0) puts no entry in browser history -->
<a href="javascript:void(0)">Privacy</a>
<a href="javascript:void(0)">About </a>
</footer>
</div>
<!-- 'display: none' to hide this part of the document from view, definition only -->
<!-- usage of a 'symbol' is <use href="#symbol-ID"> in HTML -->
<svg style="display: none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="eva-arrow-back-fill" viewBox="0 0 24 24">
<path d="M19 11H7.14l3.63-4.36a1 1 0 1 0-1.54-1.28l-5 6a1.19 1.19 0 0 0-.09.15c0 .05 0 .08-.07.13A1 1 0 0 0 4 12a1 1 0 0 0 .07.36c0 .05 0 .08.07.13a1.19 1.19 0 0 0 .09.15l5 6A1 1 0 0 0 10 19a1 1 0 0 0 .64-.23a1 1 0 0 0 .13-1.41L7.14 13H19a1 1 0 0 0 0-2z"/>
</symbol>
</svg>
</body>回答4:
Check out the MDN Post on these topics too.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
回答5:
It would be easier to create this entire page than to fix each and every css bugs !
Add this at the very top of your Css below body styling
footer {
position: fixed;
bottom: 0;
margin-bottom: 2vh;
width: 100%;
}
Well i couldnt perform the surgery but applied a little band aid on the injury ! this will stop the bleeding for a while until you walk again .
来源：https://stackoverflow.com/questions/62961971/set-fixed-spacing-for-flexbox-list