CSS的标题，段和页脚排列

问题描述：

<header></header> 
<main> 
<nav></nav> 
<section></section> 
</main> 
<footer></footer>

，我需要的CSS有在顶部的标题，在底部的页脚，资产净值和集管之间的部分和页脚，左侧的导航栏和右侧的栏目。

作为一个例子：https://fr.wikipedia.org/

但在主内容比屏幕尺寸小的情况下，我需要有固定在屏幕的底部的页脚。

我的CSS是这样的事情：

header, nav, section, footer { 
     padding: 1px 0; 
    } 

    header { 
     background-color: lightcoral; 
     text-align: center; 
     background: #FF9900 url("/Content/Images/Etoile.png") 5px center no-repeat; 
     background-size: 100px; 
    } 

    main { 
     margin: auto; 
    } 

    nav { 
     float: left; 
     width: 15%; 
     background-color: lightsalmon; 
    } 

    section { 
     float : right; 
     width : 85%; 
     background-color: lightblue; 
    } 

    footer { 
     background-color: lightgreen; 
     text-align: center; 
     clear: both; 
    }

你能帮助我吗？

只要使用谷歌 - https://css-tricks.com/couple-takes-sticky-footer/ –

你可以发布您有证明这个问题的问题您当前的CSS ？另请参阅[**如何创建最小，完整和可验证的示例**]（https://*.com/help/mcve） – Nope

header，nav，section，footer { padding：1px 0;} header {background} color：lightcoral; text-align：center; background：＃FF9900 url（“/ Content/Images/Etoile.png”）5px center no-repeat; background-size：100px;} main { margin：auto;} nav {float} {float：left; 宽度：15％; background-color：lightsalmon;} 部分{ float：right; 宽度：85％; background-color：lightblue;} footer { background-color：lightgreen; text-align：center; 明确：两者;} 对不起，我不知道如何把代码 –

答

你想要做的是创建一个简单的页面布局。您可以查看this resource了解如何执行此操作的一般信息，因为有多种方式。

从上述资源中提取的示例使用CSS float属性。它应该给你足够的开始为您的解决方案。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
} 
 

 
header, footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
    
 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 170px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
<header> 
 
    <h1>City Gallery</h1> 
 
</header> 
 
    
 
<nav> 
 
    <ul> 
 
    <li><a href="#">London</a></li> 
 
    <li><a href="#">Paris</a></li> 
 
    <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
</nav> 
 

 
<article> 
 
    <h1>London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</article> 
 

 
<footer>Copyright &copy; W3Schools.com</footer> 
 

 
</div> 
 

 
</body> 
 
</html>

谢谢你的回答。但是，在文章内容小于页面大小的情况下，我需要将页脚固定在页面底部。 –

您可以添加“position：fixed; width：100％; bottom：0;”到页脚类。你是这个意思吗？ – Libi

目前，我有这个：http://nsa38.casimages.com/img/2017/06/06/170606055428193894.png 我想要这个： http://nsa38.casimages.com/img/ 2017/06/06/170606055604140643。png –

CSS的标题，段和页脚排列

相关推荐