HTML CSS - 页脚 - 下面的空间

Question

我在试图让我的页脚“粘在”所有内容下面的页面底部时遇到问题。 我尝试了很多不同的技术，但无法使用标题。

设计样式的最佳方法是什么？

正如您所看到的，侧边栏和内容div通过页脚。

<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>


    <header>
        <div id="title_wrapper">
                <h1 id="title_text">Title</h1>
                <p>title</p>
        </div>
    </header>

   <div id="wrapper">

       <div id="content">

            <p>Languages</p>

            <ul>
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
                 <li>4</li>
                 <li>5</li>

            </ul>

             <p>Frameworks</p>

            <ul>
                 <li>1</li>
                 <li>2</li>

            </ul>

        </div>

        <div id="sidebar">

              Sidebar  
        </div>
    </div>

   <footer>
       Footer

   </footer>

</body>

CSS：

html, body
{
 width: 100%;   
 height: 100%;
 margin:0;
 padding: 0;
}



h1, p {
padding: 0;
margin: 0;
}


/*Content*/

#wrapper{

  min-height: 70%;
 height: auto;
 height: 70%;
 margin: 0 auto -400px;
}

#content{
float:left;
width:70%;
height: 100%;

}

#sidebar{
padding-top: 30px;
float:left;
width: 30%;
background-color: lightgrey;
height: 100%;
text-align: center
}

/* Header */

header #title_text{

 font-size: 70px;
}

header #title_wrapper{
text-align:center;
position: relative;
top:100px;

}

header {

background-color: orange;
position: relative;
height:30%;
width: 100%;
color:white;
margin:0;

}


/* footer */
footer{
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;  
}

Answer 1

你似乎有一些我无法理解的奇怪工作。

我把你的代码放到一个jsfiddle并修复了问题。 这是它的外观： https ： //jsfiddle.net/pdyrgc2j/3/

变化是：

删除margin: 0 auto -400px; 在包装上。 你为什么需要那个？
从#title-wrapper删除了top: 100px 。 再也无法理解为什么你需要那个？
导致侧边栏滚动的主要问题是侧边栏上的30px填充。 通过将文本移动到侧边栏内的另一个div并对该div应用填充来解决这个问题
~~根据@Pankaj的建议，建议将页脚的位置更改为固定，但在上述更改后，您将不会注意到任何差异~~

编辑：实际上，不建议将位置更改为固定，因为页脚始终在屏幕上可见。 不要设置位置属性，如小提琴中所示，并且页脚将始终低于内容。

Answer 2

使用position: fixed而不是position: absolute for footer

footer {
    background-color: #202020;
    color: white;
    position: fixed;
    width: 100%;
    height: 60px;
    bottom: 0;
}

HTML CSS - 页脚 - 下面的空间

问题描述

2 个解决方案

解决方案1
3 2016-02-21 09:36:52

解决方案2
0 2016-02-21 08:57:32

HTML CSS - 页脚 - 下面的空间

问题描述

2 个解决方案

解决方案1 3 2016-02-21 09:36:52

解决方案2 0 2016-02-21 08:57:32

解决方案1
3 2016-02-21 09:36:52

解决方案2
0 2016-02-21 08:57:32