フッターを下に置く

私は少し問題があります。私はフットボールを体に相対的な底に置いていますが、私がスクロールを使用しているときは、フッタはもはや底にくっついていません。フッターを下に置く

これはHTML

<body> 
<div id="top-line"></div> 
<div id="header"> 
    <div class="wrapper"> 
    <div class="logo"> </div> 
    </div> 
</div> 
<div id="menu"> 
    <?php include 'menu.php';?> 
</div> 
<div class="wrapper"> 
    <div id="content"> 
    <div id="applybox"> 
    <form action = "" method = "post"> 
    <label>Firstname</label> 
    <input class="inputfield" type = "text" name = "firstname" placeholder="E.g. Srinivasa" /> 
    <label>Lastname</label> 
    <input class="inputfield" type = "text" name = "lastname" placeholder="E.g. Ramanujan" /> 
    <label>Age</label> 
    <input class="inputfield" type = "number" name = "password" min="16" max="40" /> 
    <label>Gender</label> 
    <select class="inputfield" name="gender"> 
     <option value="">Select...</option> 
     <option value="Male">Male</option> 
     <option value="Female">Female</option> 
    </select> 
    <label>Origin</label> 
    <select class="inputfield" name="origin"> 
     <option value="">Select...</option> 
     <option value="Caucasian">Caucasian</option> 
     <option value="Asian">Asian</option> 
     <option value="African">African</option> 
     <option value="Latino">Latino</option> 
    </select> 
    <label>Describe your character's life up until current age.</label> 
    <textarea class="inputfield" name="background" rows="5" cols="40" placeholder="The life of your character..."></textarea> 
    <input class="applybutton" type = "submit" value = "File application"/> 
    </form> 
</div> 
    </div> 
</div> 
<div id="footer">Copyright &copy; 2016 Degenraiderz. All rights reserved.</div> 
</body>

であり、これは私が間違ってここに何をしたCSS

/*===RESET===*/ 
html,body,p,div,img,h1,h2,h3,h4,h5,li,ul,ol,dl,dd,dt,a,form,pagele,td,tr,blockquote,iframe { 
    margin:0px; 
    padding:0px; 
    border:0px; 
    border-collapse:separate; 
    border-spacing:0px; 
    text-decoration: none; 
} 

* :focus { outline: 0; } 

ul {list-style: none;} 

/*=================RESET COMPLETE========================*/ 

@font-face { 
font-family: 'Bebas Neue'; 
font-style: normal; 
font-weight: normal; 
src: local('Bebas Neue'), url('/fonts/BebasNeue.woff') format('woff'); 
} 

@font-face { 
    font-family: 'open_sansregular'; 
    src: url('/fonts/OpenSans-Regular-webfont.eot'); 
    src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/fonts/OpenSans-Regular-webfont.woff') format('woff'), 
     url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'), 
     url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

html { 
    height: 100%; 
    position: relative; 
} 

body { 
    font-family: Arial,sans-serif; 
    font-size: 12px; 
    background: #555; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

a { 
    text-decoration: none; 
} 

#top-line { 
    height: 8px;  
    background: #f1ebe0; 
} 

#footer { 
    color: #F7F7F7; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background: #292c2f; 
    height: 17px; 
    border-top: 3px solid #f1ebe0; 
    padding: 4px 0 2px 0; 
    text-align: center; 
    clear:both; 
} 

#header { 
    width: 100%; 
    background: #292c2f; 
    border-bottom: 3px solid #f1ebe0; 
} 

.headerbar { 
    width: 100%; 
} 

#navigation { 
    list-style: none; 
    display: block; 
    padding: 10px 0 10px 0; 
    text-align:right; 
} 

#navigation li {  
    display: inline-block; 
    position: relative; 
} 

#navigation li a { 
    color: #e5e5e5; 
    font-family: Bebas, Tahoma, Arial, sans-serif; 
    font-weight: bold; 
    font-size: 18px; 
    padding: 10px 17px; 
    -webkit-transition: background-color .2s linear; 
    -moz-transition: background-color .2s linear; 
    -o-transition: background-color .2s linear; 
    -ms-transition: background-color .2s linear; 
    transition: background-color .2s linear; 
} 

#navigation li a.active { 
    border-bottom: 3px solid #f1ebe0; 
    background: #444; 
    color: #F7F7F7; 
} 

#navigation li a:hover { 
    color: #F7F7F7; 
    background: #444; 
    border-bottom: 3px solid #f1ebe0; 
} 

#menu { 
    width: 100%; 
    background: #292c2f; 
    -webkit-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65); 
    -moz-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65); 
    box-shadow:   0px 7px 21px 0px rgba(50, 50, 50, 0.65); 
} 

#menu .wrapper { 
    width: 1170px; 
    margin: 0 auto; 
} 

.wrapper { 
    width: 1170px; 
    margin: 0 auto; 
} 

.logo { 
    position: relative; 
    min-height: 300px; 
    background: url(/images/banner.png) center center no-repeat; 
    background-size: cover; 
} 

#loginbox { 
    color: #16325c; 
    background: #CCC; 
    width: 380px; 
    height:300px; 
    margin: 0 auto; 
    margin-top: 50px; 
    padding: 20px; 
    font-family: Bebas, Tahoma, Arial, sans-serif; 
    border-radius: 5px; 
    border: 1px solid #333; 
} 

.input { 
    border: 1px solid #333; 
    border-radius: 4px; 
    border-image-source: initial; 
    border-image-slice: initial; 
    border-image-width: initial; 
    border-image-outset: initial; 
    border-image-repeat: initial; 
    background-color: #F9F9F9; 
    font-family: open_sansregular, Arial, sans-serif; 
    box-sizing: border-box; 
    -webkit-appearance: none; 
    font-size: 14px; 
    transition: all 0.1s; 
    width: 100%; 
    padding: 12px; 
} 

.user { 
    margin-top: 8px; 
    margin-bottom: 16px;  
} 

.pass { 
    margin-top: 8px; 
    margin-bottom: 16px;  
} 

.loginbutton { 
    width: 100%; 
    background-color: #E9D7AD; 
    color: #16325c; 
    transition: all 0.1s; 
    border: 1px solid #999; 
    padding: 12px 24px; 
    border-radius: 4px; 
    font-size: 14px; 
    font-family: open_sansregular, Arial, sans-serif; 
    cursor: pointer; 
    background-image: none !important; 
} 

.loginbutton:hover { 
    background-color: #f1ebe0; 
} 

.remember { 
    padding: 16px 0; 
    position: relative; 
    margin: 0px; 
    font-size: 14px;  
} 

.forgot { 
    width: 100%; 
    border-top: 1px solid #D8DDE6; 
    color: #f1ebe0; 
    padding-top: 10px; 
    text-align: right; 
} 

#content { 
    font-family: open_sansregular, Arial, sans-serif; 
    margin-top: 10px; 
    position: relative; 
    text-align: justify; 
    color: #e5e5e5; 
} 

#content .wrapper { 
    margin-right: -2%; 
} 

.box { 
    box-sizing: border-box; 
    width: 23%; 
    margin: 1%; 
    float:left; 
    display: inline-block; 
    background: #999; 
    border-radius: 5px; 
    border: 1px solid #999; 
    padding: 10px;  
} 

.box .content { 
    overflow: hidden; 
    font-size: 15px; 
    display: inline-block; 
    background: #999; 
    border-radius: 5px; 
    border: 1px solid #999; 
    padding: 10px; 
} 
.box .title { 
    height:30px; 
    line-height:30px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    background: #666; 
    font-size:18px; 
    font-weight:bold; 
    display:block; 
    color:white; 
    padding:10px; 
    border: 1px solid gray; 
    border-bottom:none; 
} 

.dropdown-content { 
    z-index: 1; 
    display: none; 
    position: absolute; 
    bottom: -135px; 
    background: #292c2f; 
    min-width: 202px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    padding: 12px 16px; 
    display: block; 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

nav { 
    font-family: open_sansregular, Arial, sans-serif; 
} 

nav ul ul { 
    display: none; 
} 

    nav ul li:hover > ul { 
     display: block; 
    } 

nav ul { 
    list-style: none; 
    display: inline-table; 
    position: relative; 
    padding: 0; 
    z-index: 1; 
} 
    nav ul:after { 
     content: ""; clear: both; display: block; 
    } 

nav ul li { 
    float: left; 
    -webkit-transition: background-color .2s linear; 
    -moz-transition: background-color .2s linear; 
    -o-transition: background-color .2s linear; 
    -ms-transition: background-color .2s linear; 
    transition: background-color .2s linear; 
} 
    nav ul li:hover { 
     background: #444; 
    } 
     nav ul li:hover a { 
      color: #F7F7F7; 
     } 

    nav ul li a { 
     display: block; padding: 15px 40px; 
     color: #e5e5e5; text-decoration: none; 
    } 

nav ul ul { 
    background: #292c2f; border-radius: 0px; padding: 0; 
    position: absolute; top: 100%; 
} 
    nav ul ul li { 
     float: none; 
     position: relative; 
     min-width: 185px; 
    } 
     nav ul ul li a { 
      padding: 15px 20px; 
      color: #fff; 
     } 
      nav ul ul li a:hover { 
       background: #444; 
       border-bottom: 3px solid #f1ebe0; 
      } 

nav ul ul ul { 
    position: absolute; left: 100%; top:0; 
} 

#applybox { 
    color: #16325c; 
    background: #CCC; 
    width: auto; 
    height: auto; 
    margin: 0 auto; 
    margin-top: 50px; 
    padding: 20px; 
    font-family: Bebas, Tahoma, Arial, sans-serif; 
    border-radius: 5px; 
    border: 1px solid #333; 
} 

.inputfield { 
    display:block; 
    border: 1px solid #333; 
    border-radius: 4px; 
    border-image-source: initial; 
    border-image-slice: initial; 
    border-image-width: initial; 
    border-image-outset: initial; 
    border-image-repeat: initial; 
    background-color: #F9F9F9; 
    font-family: open_sansregular, Arial, sans-serif; 
    box-sizing: border-box; 
    -webkit-appearance: none; 
    font-size: 14px; 
    transition: all 0.1s; 
    width: 100%; 
    padding: 12px; 
    margin-top: 8px; 
    margin-bottom: 16px; 
} 

.applybutton { 
    width: 100%; 
    background-color: #E9D7AD; 
    color: #16325c; 
    transition: all 0.1s; 
    border: 1px solid #999; 
    padding: 12px 24px; 
    border-radius: 4px; 
    font-size: 14px; 
    font-family: open_sansregular, Arial, sans-serif; 
    cursor: pointer; 
    background-image: none !important; 
} 

.applybutton:hover { 
    background-color: #f1ebe0; 
}

https://jsfiddle.net/introzen/g88mrg3m/

のですか？私は入れてみました身長：auto;パディングボトム：50px;オンボディが、スクロールを使用していないページでは、フッターは下部にありません。

出典

2016-04-08 Adam Enderdal

へフッターのあなたの体はheight:100%;を得たので。要素の高さは常に親の高さを参照するため、必要なサイズにはなりません。身長を削除すると、身長は子供に基づいて身長を計算します。

height:100%;を削除すると、画面の最後に貼り付けられます。

サイトを少なくとも100％の高さに保つ場合は、max-height:100%;を使用できます。動的に成長し、まだ私はcontainer div要素を追加した以下のサンプルでは、絶対下

でフッターを保つことができるflexあなたのヘッダー/フッターを使用して

出典

2016-04-08 16:16:53 BasySilver

本文から高さを削除すると、本文が0pxになり、ページの上部にあるメニューバーにフッターが貼り付けられます。 –

実際に高さを取り除くと、身体は 'height：auto;'になりますので、子の高さに伸びます。私のフィドルでは、フッターは一番下に配置されています。 https://jsfiddle.net/g88mrg3m/1/ – BasySilver

ページに十分な情報がない（スクロールしていない）ときの様子を確認してください：https://jsfiddle.net/introzen/g88mrg3m/2/ –

変更まあposition: fixed

出典

2016-04-08 16:12:12 Aaron

また、フッターが絶対的な底になるようにしたい場合は、（スクロールしたページの一番下に来るまで表示されません） –

次に、 'position：absolute'を削除します。 – Aaron

スクロールしていないときはまだページの一番下にありません。 –

、フッターにposition: absoluteを削除し、更新/これら2 CSSルールに追加

.container { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
}  
.wrapper { 
    flex: 1; 
}

スタックは、スニペット

/*===RESET===*/ 
 
html,body,p,div,img,h1,h2,h3,h4,h5,li,ul,ol,dl,dd,dt,a,form,pagele,td,tr,blockquote,iframe { 
 
    margin:0px; 
 
    padding:0px; 
 
    border:0px; 
 
    border-collapse:separate; 
 
    border-spacing:0px; 
 
    text-decoration: none; 
 
} 
 

 
* :focus { outline: 0; } 
 

 
ul {list-style: none;} 
 

 
/*=================RESET COMPLETE========================*/ 
 

 
@font-face { 
 
font-family: 'Bebas Neue'; 
 
font-style: normal; 
 
font-weight: normal; 
 
src: local('Bebas Neue'), url('/fonts/BebasNeue.woff') format('woff'); 
 
} 
 

 
@font-face { 
 
    font-family: 'open_sansregular'; 
 
    src: url('/fonts/OpenSans-Regular-webfont.eot'); 
 
    src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
 
     url('/fonts/OpenSans-Regular-webfont.woff') format('woff'), 
 
     url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'), 
 
     url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 

 
} 
 

 
html { 
 
\t height: 100%; \t 
 
\t position: relative; 
 
} 
 

 
body { 
 
\t font-family: Arial,sans-serif; 
 
\t font-size: 12px; 
 
\t background: #555; 
 
\t height: 100%; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t position: relative; 
 
} 
 

 
.container { 
 
\t height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.wrapper { 
 
    flex: 1; 
 
} 
 

 
a { 
 
\t text-decoration: none; \t 
 
} 
 

 
#top-line { 
 
\t height: 8px; \t 
 
\t background: #f1ebe0; 
 
} 
 

 
#footer { 
 
\t color: #F7F7F7; 
 
\t bottom: 0; 
 
\t width: 100%; 
 
\t background: #292c2f; 
 
\t height: 17px; 
 
\t border-top: 3px solid #f1ebe0; 
 
\t padding: 4px 0 2px 0; \t 
 
\t text-align: center; 
 
\t clear:both; 
 
} 
 

 
#header { 
 
\t width: 100%; 
 
\t background: #292c2f; 
 
\t border-bottom: 3px solid #f1ebe0; 
 
} 
 

 
.headerbar { 
 
\t width: 100%; 
 
} 
 

 
#navigation { 
 
\t list-style: none; 
 
\t display: block; 
 
\t padding: 10px 0 10px 0; 
 
\t text-align:right; 
 
} 
 

 
#navigation li { \t 
 
\t display: inline-block; 
 
\t position: relative; 
 
} 
 

 
#navigation li a { 
 
\t color: #e5e5e5; 
 
\t font-family: Bebas, Tahoma, Arial, sans-serif; 
 
\t font-weight: bold; 
 
\t font-size: 18px; 
 
\t padding: 10px 17px; \t 
 
\t -webkit-transition: background-color .2s linear; 
 
    -moz-transition: background-color .2s linear; 
 
    -o-transition: background-color .2s linear; 
 
    -ms-transition: background-color .2s linear; 
 
    transition: background-color .2s linear; 
 
} 
 

 
#navigation li a.active { 
 
\t border-bottom: 3px solid #f1ebe0; 
 
\t background: #444; 
 
\t color: #F7F7F7; 
 
} 
 

 
#navigation li a:hover { 
 
\t color: #F7F7F7; 
 
\t background: #444; 
 
\t border-bottom: 3px solid #f1ebe0; 
 
} 
 

 
#menu { 
 
\t width: 100%; 
 
\t background: #292c2f; 
 
\t -webkit-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65); 
 
\t -moz-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65); 
 
\t box-shadow:   0px 7px 21px 0px rgba(50, 50, 50, 0.65); 
 
} 
 

 
#menu .wrapper { 
 
\t width: 1170px; \t 
 
\t margin: 0 auto; 
 
} 
 

 
.wrapper { 
 
\t width: 1170px; \t 
 
\t margin: 0 auto; 
 
} 
 

 
.logo { 
 
\t position: relative; 
 
\t min-height: 300px; 
 
\t background: url(/images/banner.png) center center no-repeat; 
 
\t background-size: cover; 
 
} 
 

 
#loginbox { 
 
\t color: #16325c; 
 
\t background: #CCC; 
 
\t width: 380px; 
 
\t height:300px; 
 
\t margin: 0 auto; 
 
\t margin-top: 50px; 
 
\t padding: 20px; 
 
\t font-family: Bebas, Tahoma, Arial, sans-serif; \t 
 
\t border-radius: 5px; 
 
\t border: 1px solid #333; 
 
} 
 

 
.input { 
 
\t border: 1px solid #333; 
 
    border-radius: 4px; 
 
    border-image-source: initial; 
 
    border-image-slice: initial; 
 
    border-image-width: initial; 
 
    border-image-outset: initial; 
 
    border-image-repeat: initial; 
 
    background-color: #F9F9F9; 
 
    font-family: open_sansregular, Arial, sans-serif; 
 
    box-sizing: border-box; 
 
    -webkit-appearance: none; 
 
    font-size: 14px; 
 
    transition: all 0.1s; \t 
 
\t width: 100%; 
 
\t padding: 12px; 
 
} 
 

 
.user { 
 
\t margin-top: 8px; 
 
\t margin-bottom: 16px; \t 
 
} 
 

 
.pass { 
 
\t margin-top: 8px; 
 
\t margin-bottom: 16px; \t 
 
} 
 

 
.loginbutton { 
 
\t width: 100%; 
 
\t background-color: #E9D7AD; 
 
    color: #16325c; 
 
    transition: all 0.1s; 
 
    border: 1px solid #999; \t 
 
\t padding: 12px 24px; 
 
    border-radius: 4px; 
 
    font-size: 14px; 
 
    font-family: open_sansregular, Arial, sans-serif; 
 
    cursor: pointer; 
 
    background-image: none !important; 
 
} 
 

 
.loginbutton:hover { 
 
\t background-color: #f1ebe0; \t 
 
} 
 

 
.remember { 
 
\t padding: 16px 0; 
 
\t position: relative; 
 
\t margin: 0px; 
 
\t font-size: 14px; \t 
 
} 
 

 
.forgot { 
 
\t width: 100%; 
 
\t border-top: 1px solid #D8DDE6; 
 
\t color: #f1ebe0; 
 
\t padding-top: 10px; 
 
\t text-align: right; 
 
} 
 

 
#content { 
 
\t font-family: open_sansregular, Arial, sans-serif; 
 
\t margin-top: 10px; 
 
\t position: relative; 
 
\t text-align: justify; 
 
\t color: #e5e5e5; 
 
} 
 

 
#content .wrapper { 
 
\t margin-right: -2%; 
 
} 
 

 
.box { 
 
\t box-sizing: border-box; 
 
\t width: 23%; 
 
\t margin: 1%; 
 
\t float:left; 
 
\t display: inline-block; 
 
\t background: #999; 
 
\t border-radius: 5px; 
 
\t border: 1px solid #999; \t 
 
\t padding: 10px; \t \t 
 
} 
 

 
.box .content { 
 
    overflow: hidden; 
 
    font-size: 15px; 
 
\t display: inline-block; 
 
\t background: #999; 
 
\t border-radius: 5px; 
 
\t border: 1px solid #999; \t 
 
\t padding: 10px; \t 
 
} 
 
.box .title { 
 
    height:30px; 
 
    line-height:30px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    background: #666; 
 
    font-size:18px; 
 
    font-weight:bold; 
 
    display:block; 
 
    color:white; 
 
    padding:10px; 
 
    border: 1px solid gray; 
 
    border-bottom:none; 
 
} 
 

 
.dropdown-content { 
 
\t z-index: 1; 
 
    display: none; 
 
    position: absolute; 
 
\t bottom: -135px; 
 
    background: #292c2f; 
 
    min-width: 202px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    padding: 12px 16px; 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
nav { 
 
\t font-family: open_sansregular, Arial, sans-serif; 
 
} 
 

 
nav ul ul { 
 
\t display: none; 
 
} 
 

 
\t nav ul li:hover > ul { 
 
\t \t display: block; 
 
\t } 
 

 
nav ul { 
 
\t list-style: none; 
 
\t display: inline-table; 
 
\t position: relative; 
 
\t padding: 0; \t 
 
\t z-index: 1; 
 
} 
 
\t nav ul:after { 
 
\t \t content: ""; clear: both; display: block; 
 
\t } 
 

 
nav ul li { 
 
\t float: left; 
 
\t -webkit-transition: background-color .2s linear; 
 
    -moz-transition: background-color .2s linear; 
 
    -o-transition: background-color .2s linear; 
 
    -ms-transition: background-color .2s linear; 
 
    transition: background-color .2s linear; 
 
} 
 
\t nav ul li:hover { 
 
\t \t background: #444; 
 
\t } 
 
\t \t nav ul li:hover a { 
 
\t \t \t color: #F7F7F7; 
 
\t \t } 
 
\t 
 
\t nav ul li a { 
 
\t \t display: block; padding: 15px 40px; 
 
\t \t color: #e5e5e5; text-decoration: none; 
 
\t } 
 
\t 
 
nav ul ul { 
 
\t background: #292c2f; border-radius: 0px; padding: 0; 
 
\t position: absolute; top: 100%; 
 
} 
 
\t nav ul ul li { 
 
\t \t float: none; 
 
\t \t position: relative; 
 
\t \t min-width: 185px; 
 
\t } 
 
\t \t nav ul ul li a { 
 
\t \t \t padding: 15px 20px; 
 
\t \t \t color: #fff; 
 
\t \t } \t 
 
\t \t \t nav ul ul li a:hover { 
 
\t \t \t \t background: #444; 
 
\t \t \t \t border-bottom: 3px solid #f1ebe0; 
 
\t \t \t } 
 
\t \t \t 
 
nav ul ul ul { 
 
\t position: absolute; left: 100%; top:0; 
 
} 
 

 
#applybox { 
 
\t color: #16325c; 
 
\t background: #CCC; 
 
\t width: auto; 
 
\t height: auto; 
 
\t margin: 0 auto; 
 
\t margin-top: 50px; 
 
\t padding: 20px; 
 
\t font-family: Bebas, Tahoma, Arial, sans-serif; \t 
 
\t border-radius: 5px; 
 
\t border: 1px solid #333; 
 
} 
 

 
.inputfield { 
 
\t display:block; 
 
\t border: 1px solid #333; 
 
    border-radius: 4px; 
 
    border-image-source: initial; 
 
    border-image-slice: initial; 
 
    border-image-width: initial; 
 
    border-image-outset: initial; 
 
    border-image-repeat: initial; 
 
    background-color: #F9F9F9; 
 
    font-family: open_sansregular, Arial, sans-serif; 
 
    box-sizing: border-box; 
 
    -webkit-appearance: none; 
 
    font-size: 14px; 
 
    transition: all 0.1s; 
 
\t width: 100%; 
 
\t padding: 12px; 
 
\t margin-top: 8px; 
 
\t margin-bottom: 16px; 
 
} 
 

 
.applybutton { 
 
\t width: 100%; 
 
\t background-color: #E9D7AD; 
 
    color: #16325c; 
 
    transition: all 0.1s; 
 
    border: 1px solid #999; \t 
 
\t padding: 12px 24px; 
 
    border-radius: 4px; 
 
    font-size: 14px; 
 
    font-family: open_sansregular, Arial, sans-serif; 
 
    cursor: pointer; 
 
    background-image: none !important; 
 
} 
 

 
.applybutton:hover { 
 
\t background-color: #f1ebe0; \t 
 
}

<div class="container"> 
 
    <div id="top-line"></div> 
 
    <div id="header"> 
 
    <div class="wrapper"> 
 
     <div class="logo"> </div> 
 
    </div> 
 
    </div> 
 
    <div id="menu"> 
 
    <?php include 'menu.php';?> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div id="content" style=""> 
 
     <div id="applybox"> 
 
     <form action = "" method = "post"> 
 
      <label>Firstname</label> 
 
      <input class="inputfield" type = "text" name = "firstname" placeholder="E.g. Srinivasa" /> 
 
      <label>Lastname</label> 
 
      <input class="inputfield" type = "text" name = "lastname" placeholder="E.g. Ramanujan" /> 
 
      <label>Age</label> 
 
      <input class="inputfield" type = "number" name = "password" min="16" max="40" /> 
 
      <label>Gender</label> 
 
      <select class="inputfield" name="gender"> 
 
      <option value="">Select...</option> 
 
      <option value="Male">Male</option> 
 
      <option value="Female">Female</option> 
 
      </select> 
 
      <label>Origin</label> 
 
      <select class="inputfield" name="origin"> 
 
      <option value="">Select...</option> 
 
      <option value="Caucasian">Caucasian</option> 
 
      <option value="Asian">Asian</option> 
 
      <option value="African">African</option> 
 
      <option value="Latino">Latino</option> 
 
      </select> 
 
      <label>Describe your character's life up until current age.</label> 
 
      <textarea class="inputfield" name="background" rows="5" cols="40" placeholder="The life of your character..."></textarea> 
 
      <input class="applybutton" type = "submit" value = "File application"/> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="footer">Copyright &copy; 2016 Degenraiderz. All rights reserved.</div> 
 
</div>

出典

2016-04-08 16:35:32 LGSon

ありがとうございます。しかし、私はより簡単でコードが少ない以下のソリューションを使用しました。 –

flexを使用することをお勧めする場合は、ブラウザのサポートについて人々に知らせるようにしてください。残念ながら、IEの一部のバージョン+ Edgeはflexプロパティをサポートしていません。参照：http://caniuse.com/#search=flex – BasySilver

@BasySilver IE10_and_EdgeからFlexがサポートされているので、コメントする前に自分の事実を確認してください。そのため、今日のグローバルサポートは約95％です。 – LGSon

答えて

関連する問題