Question

在此Meteor客户端代码中; id=feedback-div元素设置在id="result"下如何将id="feedback-div"元素的底部立即设置在<footer>元素之上？

* {
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 2rem;
}

h4, footer {
    font-size: 1.75rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}

li {
    font-size: 1.25rem;
}

p {
    font-size: 1.5rem;
}


@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }
}
#header, input, footer, button, textarea, p {
    font-size: 1.5rem;
}
div#header {
    z-index: 1;
    width: 100%;
    position: fixed;
    top: 0;
    overflow: hidden;
    text-align: center;
    padding-top: 0.5rem;
    height: 3.5rem;
}
.busy {
    color: red;;
}
input, p {
    margin: 0.25em;
    padding: 0.25em;
}

footer {
    width: 99%;
    position: fixed;
    bottom: 1px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
}

button {
    border-radius: 1em;
    background-color: lightgray;
    margin: auto;
    text-align: center;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0.5em;
}

div#main {
    top: 3.6rem;
    position: absolute;
    width: 100%;
}
#login-div {
    z-index: 1;
    font-size: 1.5rem;
    text-align: right;
    padding: 0.5rem;
    top: 3.5rem;
    right: 0.5rem;
    position: fixed;
}
div#content {
    position: relative;
    top: 2rem;
    padding: 0.5rem;
}

input#plateNum {
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: uppercase;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: uppercase;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: uppercase;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: uppercase;
}
#plateNum {
    margin: 0;
}

.note {
    color: orange;
    font-size: smaller;
}
textarea#feedback {
    width: 100%;
}
p#result {
    height: 10rem;
    background-color: red;
}
ol {
    padding-left: 2rem;
}
#feedback-div {
    background-color: yellow;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  {{> header}}
  <div id="main">
    <div id="content">
      <form>
        <button type="submit" style="display:none"></button>
        {{> content}}
        {{> feedback}}
        {{> footer}}
      </form>
    </div>
  </div>
</body>

<template name="content">
  <input type="text" id="plateNum" autocomplete="off">
  {{> results}}
</template>
<template name="results">
  <p id="result">{{{display.abcd}}}<br>{{{display.a}}}<br>{{{display.b}}}<br>{{{display.c}}}
    <br>{{{display.d}}}</p>
</template>
<template name="feedback">
  <div id="feedback-div">
    <textarea id="feedback" rows="4" cols="50" maxlength="255"></textarea>
    <button id="email">SEND</button>
    <p id="response"><br></p>
  </div>
</template>
<template name="footer">
  <footer>
    <button id="clear">CLEAR</button>
    <button id="info">INFO</button>
  </footer>
</template>

Answer 1

这为我解决了。

＆＃13;

div#feedback-div {
    position: fixed;
    bottom: 12px;
}

＆＃13;

Answer 2

我使用了vertical-align，过去有一个div位于另一个div之上。我应该说我之前从未使用过Meteor，所以由于我可能没有意识到某些原因，这种情况有可能无法使用。希望它适合你！

#feedback-div {
    background-color: yellow;
    vertical-align: bottom;
    display: inline-block; /* Or whichever inline/table display you'd prefer */
}

修改

我忘了提到vertical-align仅适用于内联级和表格单元格，因此有必要应用显示类型来实现，如上所述。我确认了此信息here。

将div元素定位在另一个固定到底部的元素之上

2 个答案: