下位に固定されたdiv要素を上に置く

このMeteorクライアントコードでは、 id=feedback-div要素はid="result" の下に設定されていますid="feedback-div"要素の下部を<footer>要素のすぐ上に設定するにはどうすればよいですか？下位に固定されたdiv要素を上に置く

* { 
    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>

出典

2017-01-20 Fred J.

私は非常にあなたの問題を得ることはありません。問題を示す[jsfiddle]（https://jsfiddle.net/）へのリンクを投稿できますか？ –

-1

私は1つは、過去に他の上に座るのdiv持つように垂直整列を使用しました。私はメテオールを使用したことがないと言わなければならないので、私が気づいていない何らかの理由でこれが機能しない可能性があります。うまくいけばそれはあなたのために働く！

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

EDIT：

私はIとして働くために、このための表示タイプを適用する必要があるので、垂直整列のみインラインレベルとテーブルセル素子上で動作することを言及するのを忘れ上に例示した。私はこの情報を確認したhere。

出典

2017-01-20 01:52:42

thx。それはうまくいかなかった。 –

申し訳ありませんが、vertical-alignはインラインレベルまたはテーブルセルの要素に対してのみ機能することを完全に忘れています。 'display：inline-block;'で試してみてください。あるいは、それらのパラメータに適合していればどれを選んでも構いません。 –

これは私のために修正されました。

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

出典

2017-01-20 03:59:30

下位に固定されたdiv要素を上に置く

答えて

関連する問題