HTML CSS - 页脚 - 下面的空格

我有问题试图让我的页脚“粘”到页面底部的所有内容下面。我尝试了许多不同的技术，但无法使其与标题一起工作。HTML CSS - 页脚 - 下面的空格

什么是最好的方式来布局我的布局来实现这一目标？

正如你可以看到侧边栏&内容divs通过页脚。

<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; 
}

来源

2016-02-21 Declan Watt

嗨，请做一个谷歌搜索“粘脚” - 有很多不同的方式可以实现 –

看到这个小提琴https://jsfiddle.net/zqmpLenp/ –

检查我的答案为jsfiddle（https： //jsfiddle.net/pdyrgc2j/1/）。删除尾部1 /以查看Declan的原始代码，但位置：绝对更改为position：fixed（https://jsfiddle.net/pdyrgc2j/） – Parth

使用position: fixed而不是position: absolute的页脚

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

来源

2016-02-21 08:57:32

主要问题是边栏上的30px填充，导致溢出，因为高度也设置为100％。我解决了我的答案中提到的问题。 – Parth

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

我把你的代码放入jsfiddle并修正了问题。这是它的外观：https://jsfiddle.net/pdyrgc2j/3/

的变化是：

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

编辑：其实，改变位置固定为不最好的注脚总是会显示在屏幕上。如Fiddle所示，根本不要设置位置属性，并且页脚始终会低于内容。

来源

2016-02-21 09:36:52 Parth

谢谢你的工作！是的，我正在试验，并有冗余的代码，我猜 –

我注意到侧边栏div仍然重叠页脚div –

但是页脚仍然在侧栏上方不是吗？你想将页脚放在侧栏下面吗？ – Parth

HTML CSS - 页脚 - 下面的空格

回答

相关问题