Question

我正在制作一个“学校”类型的网站，该网站将在“教室”页面中包含辅助导航。我将辅助导航设置作为手风琴，包含在<aside>和</aside>标签中。使用css aside { position: absolute; height: 700px;}将aside元素设置为固定位置。我遇到的问题是我的<footer>部分位于<aside>部分的中间位置。我尝试使用clear: both;的css属性作为页脚部分，但这没有效果。

<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/

任何和所有帮助搞清楚这一点都会很棒。

Answer 1

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

Answer 2

查看here可能的解决方案：

1-您需要设置与您的部分匹配的高度。

height: 350px;

2-设置旁边的溢出（隐藏或滚动）

 overflow-y: hidden;

2-为你的助手设置右上角

top: 20px;

就是这样。

Answer 3

可能是这样的：

* {
	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>

无论哪个元素更大，不管或部分，都会将页脚向下推，这样它就可以根据需要增长。

Answer 4

当你有浮动元素时，可以使用“clear：both”。在这种情况下，我建议您在正文中设置min-height 100vh（这是屏幕高度），并在页脚元素中使用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;
}

Answer 5

减少一边和标题之间的差距。
```
top: 20px;
```
设置旁边的高度属性
```
height: 100%;
```
设置旁边的溢出属性
```
overflow-y: scroll;
```
增加部分边距以适应滚动条
```
margin-left: 25%;
```

这些修改将页脚放在一边，让用户无论多长时间都可以滚动到旁边。希望这可以帮助。 https://jsfiddle.net/1rx6dchc/4/

浮动元素延伸到页脚

5 个答案: