Question

我试图将页脚放在页脚底部的水平线底部。但我甚至无法在底部获得页脚。试过很多帖子和博客，但我错过了一些东西。我正在使用一些博客的基础来创建注册页面。

HTML

http.Handler

CSS

    <div id="header">

    </div>

    <div id="main"> 
    <div id="container">

  <form action="index.html" method="post">

    <p id="form_title" style='color:#808080'>Create an Account</p>

    <fieldset>
      <legend style="color:#585858">Get started with Your Profile</legend>
      <label for="name" style='color:#808080;font-size:14px'>CUSTOM NAME</label>
      <input type="text" id="name" name="user_name" style="color:#404040">


      <label for="type" style='color:#808080;font-size:14px'>TYPE</label>
      <select id="sel-type" name="type">

        <option value="frontend_developer">Front-End Developer</option>
        <option value="php_developor">PHP Developer</option>
        <option value="python_developer">Python Developer</option>
        <option value="rails_developer"> Rails Developer</option>
        <option value="web_designer">Web Designer</option>
        <option value="WordPress_developer">WordPress Developer</option>


    </select>
    <label for="type" style='color:#808080;font-size:14px'>REGION</label>
    <select id="sel-region" name="region">

        <option value="frontend_developer">Front-End Developer</option>
        <option value="php_developor">PHP Developer</option>
        <option value="python_developer">Python Developer</option>
        <option value="rails_developer"> Rails Developer</option>
        <option value="web_designer">Web Designer</option>
        <option value="WordPress_developer">WordPress Developer</option>


    </select>


    </fieldset>
    <button type="submit">Create Profile</button>
  </form>



    </div>

</div>

<div id="footer">
    <a href="About">About</a>
    <a href="info.com">Instructions</a>



<a href="tt.com">Encountered an issue?</a>  
</div>

Answer 1

对于你的css，试试

#footer {
    position: relative; 
    ...
}

同样对于水平线只需使用

<hr>

页脚上方的html标记

（对不起，我的编辑看起来很尴尬，因为只要我使用该标签，stackoverflow会打印出一条水平线）

此外，它更简单，如果你想对CSS进行微小的更改。

http://jsfiddle.net/750h2crz/7/

Answer 2

将它放在你的css中，并使用边框而不是水平线。

    footer {
       position: absolute;
       bottom: 0;
       height: 60px;
       border-top-width: 5px;
       border-top-style: solid;
       border-top-color: #FFF;
    }

Answer 3

删除你风格的position: absolute：

#footer {
    position: absolute;
    /* ... */
}

FIDDLE：https://jsfiddle.net/lmgonzalves/750h2crz/2/

Answer 4

用

更新了你的css

#footer {
    position:fixed;
    width:100%; /* fill the whole width of the screen */
    border-top:1px solid #aaa; /* you can change to whatever color you want */
    padding-top:10px; /* add some spacing between line and links/text */
    background:#fff; /* this is important otherwise your background will be transparent, change the color based on your needs */
    /* ... your other properties */
}

还更新了您的身体样式，底部有一些填充以抵消页脚

body {
    /* ... your other properties */
    padding-bottom:65px;
}

Answer 5

我只是使用单独的标签作为页脚秒并使用水平规则标签

<div id="footer">
                <hr>
   <footer>
           <a href="About">About</a>
           <a href="info.com">Instructions</a>



           <a href="tt.com">Encountered an issue?</a>  
  <footer>
</div>

THX

页脚底部有水平线

HTML

CSS

5 个答案: