javascript - 定位不正确

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        3年前关闭。



我的问题是我的页脚没有按我的指示放置在页面底部。我不知道如何解决它，也不知道如何解决输入框的任何提示，这样当我输入它们时，它们会变成黑色，而不是灰色。

    <head>
        <title>Website</title>
        <link rel='stylesheet' type='text/css' href='./css/style.css'>
        <link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Baloo+Paaji" rel="stylesheet">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
<body>
    <div id='banner'>
        <div class='nav'>
            <ul class="topnav">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="#news">News</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li class="right"><a href="#about">About</a></li>
            </ul>
        </div>
    </div>
    <div id='main'>
        <input type="text" value="First Name" name="First Name" id="First Name" onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" />
        <input type="text" value="Middle Name" name="Middle Name" id="Middle Name" onblur="if (this.value == '') {this.value = 'Middle Name';}" onfocus="if (this.value == 'Middle Name') {this.value = '';}" />
        <input type="text" value="Last Name" name="Last Name" id="Last Name" onblur="if (this.value == '') {this.value = 'Last Name';}" onfocus="if (this.value == 'Last Name') {this.value = '';}" />
        <br>
        <input type="text" value="Email" name="Email" id="email" onblur="if (this.value == '') {this.value = 'Email';}" onfocus="if (this.value == 'Email') {this.value = '';}" />
        <input type="text" value="Phone Number" name="Phone Number" id="Phone Number" onblur="if (this.value == '') {this.value = 'Phone Number';}" onfocus="if (this.value == 'Phone Number') {this.value = '';}" />
        <br>
        <input type="text" value="Country" name="Country" id="Country" onblur="if (this.value == '') {this.value = 'Phone Number';}" onfocus="if (this.value == 'Country') {this.value = '';}" />
        <input type="text" value="Age" name="Age" id="Age" onblur="if (this.value == '') {this.value = 'Age';}" onfocus="if (this.value == 'Age') {this.value = '';}" />
        <input type="text" value="Gender" name="Gender" id="Gender" onblur="if (this.value == '') {this.value = 'Gender';}" onfocus="if (this.value == 'Gender') {this.value = '';}" />
        <br>
        <input type="text" value="Message" name="Message" id="Message" onblur="if (this.value == '') {this.value = 'Message';}" onfocus="if (this.value == 'Message') {this.value = '';}" />
    </div>
</body>
<body>
    <div class='footer'>
        <u><a href=''>Dawson Hudson</u>
    </div>
</body>
</html>
Css

/*---------------------------------------Styles Everything---------------------------------------*/
*{
    padding:0px;
    margin: 0px;
}
body, html {
    width: 100%;
    height: 100%;
}
/*------------------------------------Makes The Page Flexible-------------------------------------*/
@media screen and (max-width: 600px){
    ul.topnav li.right,
    ul.topnav li{
        float: none;
    }
    ul.topnav li a {
        font-size: 10pt;
    }
}
/*===========================================Home Page============================================*/
/*------------------------------------------Banner Code-------------------------------------------*/
#banner {
    width: 100%;
    height: 570px;
    background-image: url('../images/DH.png');
    background-size: 100%;
    background-repeat: no-repeat;
    border-bottom: #333 solid 5px;
}
/*-------------------------------------------Link Code-------------------------------------------*/
ul.topnav {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background-color: #333;
    position: fixed;
    padding-left: 10%;
    z-index: 10;
}
ul.topnav li {
    float: left;
    }
ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 30px;
    text-decoration: none;
    font-family: 'Baloo Paaji' ,cursive;
    font-size: 20pt;
}
ul.topnav li a:hover {
    background-color: #34B5E0;
    }
ul.topnav li.right {
    position: absolute;
    padding-right: 7.5%;
    right: 10.5%;
}
/*---------------------------------------Main Page Code---------------------------------------*/
#main {
    width: 80%;
    position: relative;
    top: 100px;
    left: 10%;
    z-index: 1;
    background-color: pink;
}
/*-------------------------------------------Row Code-------------------------------------------*/
.row {
    width: 100%;
    height: 40%;
    background-image: url('../images/holder.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    border: 2px black solid;
    z-index: 2;
}
.rowText {
    width: 40%;
    height: 90%;
    position: relative;
    top: 5%;
    right: 2.5%;
    float: right;
}
.rowText button {
    width: 30%;
    height: 9%;
    border-radius: 5px;
    background: black;
    border: none;
    color: white;
    font-family: 'bungee', cursive;
    font-size: 15pt;
    cursor: pointer;
}
.rowText button.Fb {
    position: absolute;
    bottom: 0%;
    right: 0%;
    background-image: url('../images/facebook.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
}
.rowText button.Pin {
    position: absolute;
    bottom: 0%;
    right: 35%;
    background-image: url('../images/pinterest.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
}
.rowText button.Tw {
    position: absolute;
    bottom: 0%;
    left: 0;
    background-image: url('../images/twitter.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
}
a button.tw:hover, button.Pin:hover, button.Fb:hover {
    opacity: 1;
}
.rowText h1 {
    color:  rgba(255,255,255,0.7);
    font-family: 'bungee', cursive;
    font-size: 30pt;
    position: absolute;
    top: -20px;
    left: 0px;
}
.rowText h2 {
    color: rgba(255,255,255,0.5);
    font-family: 'baloo paaji', cursive;
    font-size: 15pt;
    position: absolute;
    top: 10%;
    left: 0px;
}
.rowText h3 {
    color: white;
    font-family: 'baloo paaji', cursive;
    font-size: 15pt;
    position: absolute;
    top: 20%;
    left: 0px;
}
.footer { /*---------------------------------------------------Footer Code-----------------------------------------------------*/
    background-image: url('../images/footer.png');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 200px;
    position: absolute;
    bottom:0px;
}
.footer u{
    font-size: 22px;
    position: absolute;
    bottom: 10px;
    left: 10%;
}
.footer a:visited {
    color: white;
}
.footer a:active{
    color: #34B5E0;
}
.footer a:hover {
    text-decoration: none;
    color: grey;
    cursor: pointer;
}
/*=========================================Contact Page==========================================*/
#main input {
    height: 50px;
    width: 20%;
    font-family: 'baloo paaji', cursive;
    font-size: 20pt;
    text-align: center;
    position: relative;
    left: 20%;
    color: grey;
    margin-left: -4px;
}
#main input:active {
    color: black;
}
#main input#email {
    width: 40%;
}
#main input#Message {
    width: 60%;
    height: 400px;
    text-align: left;
}
/*===========================================News Page===========================================*/

最佳答案

您在bootstrap sticky footer docs中有答案

按F12打开开发人员工具
查看页面的CSS，尤其是包装ID的样式（您应将横幅和主要内容包装在div中）->最小高度：100％是关键
还要注意换行div内的push div（但是，如果使用它，还要在换行样式中添加margin：0 auto -60px）

这应该给出您想要的答案。

关于javascript - 定位不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39860982/

上一篇：html - Bootstrap 在一行中为多个单词着色？

下一篇：html - 使用没有类的 nth-child() 和 <li> 模拟行

相关文章：

javascript - 单击书签时意外打开新页面

javascript - flexbox 对齐中心垂直和水平不能正常工作

javascript - Chart.js 时间序列图表 - 格式化和缺失数据值

html - 使这个旋转加载器透明

css - 为什么在相对定位没有显式高度的元素时会忽略 'top' 属性？

javascript - 隐藏 block 引用但替换为换行符

javascript - 如何使用 JavaScript 获取用户代理影子根中的元素？

javascript - 在 JavaScript 中使用正则表达式从字符串中删除斜杠

JavaScript html 网络表单

html - 从 href 链接列表中抓取数据？