个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在制作一个“学校”类型的网站，该网站将在“类”页面中包含一个辅助导航。我将辅助导航设置作为 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/
25
4
0
在文档中我们可以找到 The limits are based on a moving window that tracks the number of requests you send per h
我试图了解使用 Windows Azure 托管 Web 服务的正确方法。在阅读了一些可用的文档后，我已经达到以下几行: Windows Azure takes the following actio
我正在使用 unboundid ldap sdk 来执行 ldap 查询。运行 ldap 搜索查询时遇到一个奇怪的问题。当我对包含 50k 个条目的组运行查询时出现异常。我的异常(exception)
我有以下 docker-compose 文件: version: "2.4" services: auto_check: image: python mem_limit: 97M
我有副本集(托管在亚马逊上)，其中有: 主要 中学 仲裁者 它们都是 3.2.6 版本，这个副本正在我的分片集群中创建一个分片(如果这很重要，尽管我认为它不重要)。 当我在 primary 上键入 r
我知道在 C++ 中访问缓冲区边界是未定义的行为。 这是来自 cppreference 的示例: int table[4] = {}; bool exists_in_table(int v) {
嗨，我有一个表单的 div。我希望当鼠标离开 div 时禁用单击事件。所以我尝试了这个，但它不起作用，div 仍然可以点击。有什么想法吗？？ var flag = false; $("#foo").l
我正在使用我的客户端获取有关存储在我的 Swift 对象存储中的某个文件的一些信息，该文件可以通过 REST Api 访问。在 Swift 中，指向指定对象的 HEAD 方法和 url 返回它的元数据
如何在 Excel 的 CONCATENATE 函数中使用超过 255 个字符？我实际上也在 EXCEL 的 HYPERLINK 函数中使用 CONCATENATE 函数。一个例子如下: =HYPER
在 java 6 web 应用程序中，我尝试从执行的命令中检索大量输出。我在 javaworld article 上“借用/窃取/基于”它。我面临的问题是，由于输出被截断，长度似乎超出了大小限制。我已
我有一个更改事件，当选择框更改时会触发该事件。然而，选择框位于被替换的 div 内，因此会重新生成选择框。由于此错误可能是由于无限循环造成的，因此我猜测创建选择框时也必须触发我的触发事件。我尝试了很多
我正在 visual studio 2013 中用 c# 创建一个网络服务。我已连接到数据库并使用以下代码返回 json。 [WebMethod] [ScriptMethod(ResponseForm
我使用 php 脚本解析远程 xml 文件并将网页上的输出打印到 div 中。由于我需要输出必须与当前播放的轨道同步，所以我使用 Javascript 每 20 秒重新加载一次 div 内容。在测试页
#define MAX_BUFF_SIZE 64 char input[MAX_BUFF_SIZE]; int inSize = read(0, input, MAX_BUFF_SIZE); if
我在申请公司时遇到了问题。 我将总结系统的关键要素: 我公司的系统几年前就在 Windows XP 和 7(家庭版、专业版、基本版)机器上运行。 它是用 .NET 4.0 编写的，基于 WCF。 它使
我有一个渲染循环，用于监听数位板输入并从顶点/索引缓冲区(以及其他内容)中绘制。顶点数据可以增长，当它达到一定水平时，DispatchMsg(&msg) 会遇到这种情况: Unhandled exce
我通过 Postgres JDBC 驱动程序使用 Java 1.7 和 Postgres。将从 Web 服务使用数据库连接。在测试中，我得到了以下错误: FATAL: connection limit
我想知道当超过 Firebase 实时数据库的限制时会发生什么。问题是我知道我可以拥有的最大连接数仅为 100。现在，假设我的 Android 应用程序有 1,000 个活跃用户，并且我实现了实时数据
我正在将一组图像上传到我的 node.js Express 服务器，但收到错误 - “错误:超出 maxFieldsSize”。看起来默认的 maxFieldsSize 是 2MB。我需要能够上传最多
我正在使用 Django 构建一个小型 Web 项目，该项目有一个包含 ImageField 的模型 (Image)。当我尝试使用管理界面上传图片时，我遇到了这个问题(删除了个人身份信息): Runt
我是一名优秀的程序员,十分优秀！