Html 浮动元素超出页脚_Html_Css

Html 浮动元素超出页脚

html css

Html 浮动元素超出页脚,html,css,Html,Css,我正在制作一个“学校”类型的网站，该网站将在“教室”页面中包含辅助导航。我有一个手风琴的辅助导航设置，包含在任何和所有的帮助都可以解决这个问题。 <style> #footerContain { position: absolute; bottom: 5px; } aside { font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", seri

我正在制作一个“学校”类型的网站，该网站将在“教室”页面中包含辅助导航。我有一个手风琴的辅助导航设置，包含在


任何和所有的帮助都可以解决这个问题。

<style>
#footerContain {
   position: absolute;
       bottom: 5px;
}
aside {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size: 18px;
    margin: 2% 2% 6% 0%;
    padding-right: 3%;
    position: absolute;
    border-radius: 7px;
    top: 165px;
    width: 20%;
    height: 900px;
}
section {
    margin-left: 23%;
}
</style>

<body>

     <div>
Main Div     
     <!-- this section contains a .php include() section -->
    </div>

    <!-- Main Body/Work space -->
    <section>
Section    
    <!-- this section currently contains holder text -->
    </section>

    <!-- Classroom navigation -->
    <aside>
Aside     
     <!-- this section contains a .php include() section -->
    </aside>

    <!-- Footer section -->
    <div id="footerContain">
Footer    
    <!-- this section contains a .php include() section -->
    </div>


 </body>

#页脚包含{
位置：绝对位置；
底部：5px；
}
旁白{
字体系列：Cambria，“Hoefler文本”，“解放衬线”，“泰晤士报”，“泰晤士报新罗马”，衬线；
字号：18px；
利润率：2%2%6%0%；
右：3%；
位置：绝对位置；
边界半径：7px；
顶部：165px；
宽度：20%；
高度：900px；
}
部分{
左边缘：23%；
}
主要部门
部分
在一边
页脚
查看可能的解决方案：
1-您需要设置与您所在区域相匹配的高度
height: 350px;

2-将溢出设置在一旁（隐藏或滚动）
2-为您的助手设置正确的顶部
top: 20px;

就这样。
可能类似于：

*{
框大小：边框框；
保证金：0；
填充：0；
}
.集装箱{
宽度：100%；
}
.行{
宽度：100%；
溢出：自动；
}
旁白{
宽度：20%；
背景色：红色；
浮动：左；
}
部分{
左缘：20%；
宽度：80%；
背景颜色：蓝色；
垂直对齐：顶部；
}
#页脚包含{
宽度：100%；
高度：200px；
背景颜色：灰色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Duis颞侧同侧在auctor Comodo中。前庭不在中间。在奥迪奥安特，luctus id eros non，前庭名言前Mauris ac sagittis nisl。非便利设施的安全。梅塞纳斯·阿库姆桑·莱奥里特是一位精英。埃尼安-欧盟-卢克图斯-尼索。比本杜姆、波苏尔元素、矢状面上的选经、巨大面上的选经。南门前庭，我是临时的拉齐尼亚，奥古斯自由女神，以及在码头上的一对夫妇
Lorem ipsum dolor sit amet，是一位杰出的献身者。Duis颞侧同侧在auctor Comodo中。前庭不在中间。在奥迪奥安特，luctus id eros non，前庭名言前Mauris ac sagittis nisl。非便利设施的安全。梅塞纳斯·阿库姆桑·莱奥里特是一位精英。埃尼安-欧盟-卢克图斯-尼索。比本杜姆、波苏尔元素、矢状面上的选经、巨大面上的选经。南门前庭，我是临时的拉齐尼亚，奥古斯自由女神，以及在码头上的一对夫妇。前庭酒后驾车在瓦里帕特河，在维韦拉河。萨皮安的奎斯克坐在一个叫阿梅特·托托·萨吉蒂·康格的地方。大毒枭，大毒枭，大毒枭。南埃吉特马萨钻石。在bibendum lorem ullamcorper a。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。整数id magna ut purus maximus aliquam eget in quam
当您有浮动元素时，可以使用“清除：两者”。在这种情况下，我建议您在body中设置minheight 100vh（屏幕高度），并在footer元素中使用position:absolute
body { min-height: 100vh; }
#footerContain {position: absolute; bottom: 0;}

如果需要全宽页脚：
#footerContain {
  position: absolute;
  bottom: 0;
  display block;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
}

减少旁白和标题之间的差距
top: 20px;


将高度属性放在一边
height: 100%;

overflow-y: scroll;


将的overflow-y属性设置到一旁
height: 100%;

overflow-y: scroll;


增加节边距以适应滚动条
margin-left: 25%;


这些编辑将页脚放在侧边栏下，并允许用户滚动侧边栏，无论其长度如何。希望这有帮助。
您是否尝试过使用页脚的position
？@Kain:是的，我刚刚尝试过，它所做的唯一一件事就是将页脚移动到aside标记的前面。您能举一个JSFIDLE示例吗？aside top是165，每隔一个div它就位于下面。更改这个top:165px；或改变立场：绝对；位置：相对@Harminder：所有这些都是把我放在我的页脚部分下面，这就把页脚放在了底部。我只是用页面的全部内容来尝试，所有这些都是把页脚移到 标签的左边，并把它放在<<代码> < /代码> TAG感谢你的建议中，唯一的问题是旁白包含一个相当长的手风琴列表。另外，在以后的时间，
区域将比当前长得多。我只是不知道如何获得我现在需要的外观，以便向我的“客户”展示我对该站点的想法。在这种情况下，将两者的高度都设置为900px（尽管百分比是更可取的方式），并将它们放在带有overflow-y:scroll的div中。这样，您就不会弄乱旁白或部分，而是始终拥有完整的内容，除了页脚部分（id为“footerContain”）之外，与我尝试做的内容类似需要是动态的，并且它的位置基于区域的高度，因为此部分的高度将根据其中的内容量而变化（并且内容不会被隐藏）。@Dragonman86我编辑了代码，以便在页脚增长时灵活地显示页脚。这只是一种方法，希望你能从中有所收获。
margin-left: 25%;