Question

我注意到在我的Firefox上，网站底部与链接列表（术语，关于...）之间的距离确实很大，我似乎无法弄清楚要用.ul样式指定的内容来进行调整间距。我正在使用Firefox。移动视图还可以，我没有在手机上检查过，我只是用过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>

我的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;
    }
}

Answer 1

我注意到我的萤火虫底部之间的距离网站和链接列表（术语，关于...）的确很大

这是您创建的网页的本质，因为内容仅能达到该高度。为了使页脚元素停留在底部，我建议您使用Flexbox并将页脚设置为margin-top: auto。为了增加边距，只需为您的容器（在这种情况下为.body）提供flex显示属性和至少height的{{1}}（这样就可以了）在高度上至少占据100％的视口），并将100vh指定为column。这样，页脚就可以始终位于给定布局的底部。

flex-direction

Answer 2

我对您的代码进行了一些更改。希望对您有帮助。

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/

Answer 3

如所承诺的，对您的代码进行彻底的检查。本质上，我稍微简化了HTML并完全重新创建了CSS，以使页面完全响应，而无需使用@media查询或任何外部框架。

为所有元素引入box-sizing: border-box
主体结构使用flexbox布局
引入了 banding属性（[band]），可轻松构建“着陆页”布局
插入响应页面的T / L / B / R间距
使用线性方程式（y = mx + b）计算响应大小（主要是字体大小和元素间距）
现在仅对大小使用 em 和 rem ，并删除了所有 px
等...（此列表的外部引用尚未完成）

示例

悬停操纵
使用预定义的Unicode图标替代图标化JS（防止加载延迟）
使用嵌入式SVG作为服务Android的替代图标

测试了横向和纵向布局

可在最新的Chrome，Edge，Firefox和IE11（以及模拟的IE10）上运行
Android 9+，三星Galaxy J4 +，360x740（Chrome，Firefox和默认浏览器）
最小尺寸为320x320，最大尺寸为1920x1200

更新

使用Unicode似乎无法在Android上使用Unicode（或使用某些解决方法），这是内联SVG的替代选择。其背后的想法是：加载一些JS进而加载单个图标似乎有点过大（更不用说了）... SVG在Android上有效！

代码段（需要在整页上显示）

<!-- 
<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>

Answer 4

也请查看有关这些主题的MDN帖子。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 5

创建整个页面比修复每个CSS错误要容易得多！

将此添加到Css身体样式下方的顶部

footer {
  position: fixed;
  bottom: 0;
  margin-bottom: 2vh;
  width: 100%;
}

好吧，我无法进行手术，但是对伤口使用了一些创可贴！这将停止流血一段时间，直到您再次行走为止。

为flexbox列表设置固定间距

5 个答案: