Сохранение нижнего колонтитула внизу

У меня есть небольшая проблема. Я поместил нижний колонтитул в абсолютное дно, относительно тела, но когда я использую свиток, нижний колонтитул больше не прилипает к низу.Сохранение нижнего колонтитула внизу

это 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/

Что я сделал не так? Я пробовал поставить height: auto; и нижняя часть: 50px; на теле, но затем на страницах, не использующих прокрутку, нижний колонтитул не находится внизу.

источник

2016-04-08 Adam Enderdal

Ну его, потому что ваше тело есть height:100%;. Поскольку высота элементов всегда ссылается на его родительскую высоту, она не увеличивает размер, который вы хотите. Если вы удаляете высоту, тело будет вычислять ее высоту на основе его детей.

Удалите height:100%; и он будет придерживаться конца вашего экрана.

Если вы хотите сохранить сайт на высоте не менее 100%, вы можете использовать max-height:100%;.

источник

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

. Затем он не находится внизу страницы, когда нет прокрутки. –

Используя flex свой верхний/нижний колонтитул может динамически увеличиваться, и по-прежнему держать колонтитул в абсолютном нижней

В примере ниже я добавил container DIV, удаляет position: absolute на сноске и дополненный/добавлены эти правила 2 CSS

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

Stack фрагмент

/*===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 Перед комментированием убедитесь, что вы проверяете свои факты, поскольку flex поддерживается IE10 _and_ Edge, поэтому его глобальная поддержка сегодня составляет около 95% – LGSon

Сохранение нижнего колонтитула внизу

ответ

Смежные вопросы