我正在制作一个“学校”类型的网站，该网站将在“类”页面中包含一个辅助导航。我将辅助导航设置作为 Accordion 包含在 <aside> 中和 </aside>标签。使用 css aside { position: absolute; height: 700px;} 将 aside 元素设置到固定位置.我遇到的问题是我的 <footer>部分坐在我的中间 <aside>部分。我尝试使用 clear: both; 的 css 属性对于页 footer 分，但这没有任何效果。
<body>
<!-- Header section -->
<div>
<!-- this section contains a .php include() section -->
</div>
<!-- Main Body/Work space -->
<section>
<!-- this section currently contains holder text -->
</section>
<!-- Classroom navigation -->
<aside>
<!-- this section contains a .php include() section -->
</aside>
<!-- Footer section -->
<div id="footerContain">
<!-- this section contains a .php include() section -->
</div>
</body>
相关的css代码是:
#footerContain {
clear: both;
}
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%;
}
这是我得到的 jsFidle 示例:https://jsfiddle.net/Dragoonman/1rx6dchc/
任何帮助解决这个问题的人都会很棒。
最佳答案
也许是这样的:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
width: 100%;
}
.row {
width: 100%;
overflow: auto;
}
aside {
width: 20%;
background-color: red;
float: left;
}
section {
margin-left:20%;
width: 80%;
background-color: blue;
vertical-align: top;
}
#footerContain {
width: 100%;
height: 200px;
background-color: grey;
}<div class="container">
<div class="row">
<aside>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor ipsum in auctor commodo. Vestibulum non erat imperdiet mi malesuada interdum. In odio ante, luctus id eros non, vestibulum dictum ex. Mauris ac sagittis nisl. Maecenas non facilisis velit. Maecenas accumsan elit sed sem sagittis laoreet. Aenean eu luctus nisl. Praesent bibendum, dolor ut elementum posuere, lectus ex sagittis risus, nec lacinia est mauris ut magna. Nam vestibulum, mi nec tempor lacinia, libero odio euismod augue, et volutpat purus dui in quam.</p>
</aside>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor ipsum in auctor commodo. Vestibulum non erat imperdiet mi malesuada interdum. In odio ante, luctus id eros non, vestibulum dictum ex. Mauris ac sagittis nisl. Maecenas non facilisis velit. Maecenas accumsan elit sed sem sagittis laoreet. Aenean eu luctus nisl. Praesent bibendum, dolor ut elementum posuere, lectus ex sagittis risus, nec lacinia est mauris ut magna. Nam vestibulum, mi nec tempor lacinia, libero odio euismod augue, et volutpat purus dui in quam. Vestibulum aliquet dui at nulla volutpat, quis aliquam nulla viverra. Quisque in sapien sit amet tortor sagittis congue. Quisque magna odio, pharetra porta volutpat consequat, molestie sed lacus. Nam eget massa diam. Praesent accumsan ante nisl, in bibendum lorem ullamcorper a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id magna ut purus maximus aliquam eget in quam.</p>
</section>
</div>
<div id="footerContain"></div>无论元素较大，无论是旁边还是部分，都会将页脚向下推，以便它可以根据需要增长。
关于html - float 元素超出页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41538851/