Html 页眉、节和页脚排列的Css

我有基本的html代码：

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

---

你能帮我吗？

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

上述资源中的一个示例是使用CSS

float

属性。它应该为您提供足够的解决方案

分区集装箱{
宽度：100%；
边框：1px纯色灰色；
}
页眉、页脚{
填充：1em；
颜色：白色；
背景色：黑色；
清除：左；
文本对齐：居中；
}
导航{
浮动：左；
最大宽度：160px；
保证金：0；
填充：1em；
}
导航ul{
列表样式类型：无；
填充：0；
}
导航ula{
文字装饰：无；
}
文章{
左边距：170px；
左边框：1px纯色灰色；
填充：1em；
溢出：隐藏；
}
城市画廊





伦敦
伦敦是英国的首都。它是英国人口最多的城市，拥有超过1300万居民的大都市区

伦敦坐落在泰晤士河上，两千年来一直是一个重要的定居点，其历史可以追溯到罗马人建立时，罗马人将其命名为Londinium

版权及副本；W3Schools.com

只需使用谷歌-你能发布你当前遇到问题的css来演示这个问题吗？另外，请参见页眉，导航，部分，页脚{填充：1px 0；}页眉{背景颜色：lightcoral；文本对齐：中心；背景：#FF9900 url（“/Content/Images/Etoile.png”）5px中心不重复；背景大小：100px；}主{页边距：自动；}导航{浮动：左侧；宽度：15%；背景色：lightsalmon；}部分{浮动：右侧；宽度：85%；背景色：浅蓝色；}页脚{背景色：浅绿色；文本对齐：居中；清除：两者；}对不起，我不知道怎么说code@LuisP.A.好的，看起来不错，但我需要一个标题，左边的导航，右边的部分。我会尝试这个解决方案。我已经尝试过在谷歌上搜索。事实上，现在已经2小时了。我正在寻找解决方案。我尝试了我找到的所有东西，但都没有成功。谢谢你的回答。但我需要一个答案在文章内容小于页面大小的情况下，固定在页面底部的r。可以添加“位置：固定；宽度：100%；底部：0这就是你的意思吗？现在，我有这个：我想要这个：我不希望页脚总是固定的，但是当文章的内容小于页面大小时，当内容大于页面大小时，我希望页脚位于“文章”的底部但是当内容小于页面大小时，我希望页脚固定在页面底部。

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