个人中心
gpt4 book ai didi

html - 将页脚保持在底部

转载 作者：太空宇宙 更新时间：2023-11-03 21:21:51 25 4
gpt4 key购买 nike

我有个小问题。我已将页脚放在相对于正文的绝对底部，但是当我使用滚动条时，页脚不再固定在底部。

这是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；在主体上，但在不使用滚动的页面上，页脚不在底部。

最佳答案

那是因为你的 body 得到了 height:100%;。因为元素高度总是引用其父元素的高度，所以它不会增长到您想要的大小。如果去掉高度， body 会根据他的 child 计算高度。

删除 height:100%; 它将粘在屏幕的末尾。

如果你想让网站保持至少 100% 的高度，你可以使用 max-height:100%;。

关于html - 将页脚保持在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36504354/

25 4 0
文章推荐： html - 为什么我的媒体查询不起作用？
文章推荐： OpenCV 上的 Python 和 T-API
文章推荐： c# - Undistort失真参数
文章推荐： javascript - window.print() 就像它会打印但什么都不做
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com