HTML CSS - 页脚 - 下面的空间

Question

Am having issues trying to get my footer to 'stick' to the bottom of the page below all of the content. 我在试图让我的页脚“粘在”所有内容下面的页面底部时遇到问题。 I've tried many different techniques but can't get it to work with the header. 我尝试了很多不同的技术，但无法使用标题。

What is the best way to style my layout to achieve this? 设计样式的最佳方法是什么？

As you can see the sidebar & content divs go through the footer. 正如您所看到的，侧边栏和内容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: 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

You seem to have some weird work arounds that I couldn't understand. 你似乎有一些我无法理解的奇怪工作。

I put your code into a jsfiddle and fixed the problems. 我把你的代码放到一个jsfiddle并修复了问题。 This is how it looks: https://jsfiddle.net/pdyrgc2j/3/ 这是它的外观： https ： //jsfiddle.net/pdyrgc2j/3/

The changes are: 变化是：

Removed margin: 0 auto -400px; 删除margin: 0 auto -400px; on the wrapper. 在包装上。 Why did you need that? 你为什么需要那个？
Removed the top: 100px from #title-wrapper . 从#title-wrapper删除了top: 100px 。 Again couldn't understand why you needed that? 再也无法理解为什么你需要那个？
The main problem causing the scrolling of sidebar was the 30px padding on sidebar. 导致侧边栏滚动的主要问题是侧边栏上的30px填充。 Solved that by moving the text into another div inside the sidebar and applying padding to that div 通过将文本移动到侧边栏内的另一个div并对该div应用填充来解决这个问题
~~Changing position to fixed for the footer is advisable as suggested by @Pankaj, but after the above changes, you won't notice any difference~~ ~~根据@Pankaj的建议，建议将页脚的位置更改为固定，但在上述更改后，您将不会注意到任何差异~~

EDIT: Actually, changing position to fixed is NOT advisable as the footer will always be visible on screen. 编辑：实际上，不建议将位置更改为固定，因为页脚始终在屏幕上可见。 Don't set position property at all, as shown in the Fiddle, and the footer will always go below the content. 不要设置位置属性，如小提琴中所示，并且页脚将始终低于内容。

Answer 2

Use position: fixed instead of position: absolute for footer 使用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