Question

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

设置布局的最佳方法是什么？

正如你可以看到侧边栏＆amp;内容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;。你为什么需要那个？
从top: 100px移除#title-wrapper。再也无法理解你为什么需要它？
导致侧边栏滚动的主要问题是侧栏上的30px填充。通过将文本移动到侧边栏内的另一个div并对该div应用填充来解决这个问题
~~根据@Pankaj的建议，建议将页脚的位置更改为固定，但在上述更改后，您不会发现任何差异~~

编辑：实际上，将位置更改为固定不是可取的，因为页脚始终会在屏幕上显示。根本没有设置位置属性，如小提琴所示，页脚将始终低于内容。

Answer 2

使用position: fixed代替position: absolute作为页脚

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

HTML CSS - 页脚 - 下面的空间

2 个答案: