个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我试图实现一个保留在页面底部的页脚，即使内容不足以填满页面也是如此。
这是 JSFiddle link
虽然我能够将页脚放到底部，但我遇到了另一个问题。我希望内容一直延伸到页脚，因此示例中的背景 (aliceblue) 一直延伸到页脚。目前，我无法让它工作，所以我需要一些帮助。
这是代码。
HTML
<body>
<div class="wrap">
<div class="container"> <!-- Bootstrap specific -->
<div class="header">Header here</div>
<div class="content">
<p>website content here.</p>
<p>website content here.</p>
</div>
<div class="push"></div>
</div>
</div>
<div class="container"> <!-- Bootstrap specific -->
<div class="footer">
<p>Footer Here</p>
</div>
</div>
</body>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
background-color:wheat;
}
.header {
height:25px;
background-color: lightgreen;
}
.content {
background-color: aliceblue;
}
.footer, .push {
height: 50px;
}
.footer {
background-color:lightblue;
}
最佳答案
让我们使用 Stickyfooter =)
HTML
<div id="wrap" class="container">
<div id="main" class="content">
<div class="header">Header here</div>
<p>website content here.</p>
<p>website content here.</p>
</div>
</div>
<div id="footer" class="footer">
<p>Footer Here</p>
</div>
CSS
/*
Sticky Footer Solution
by Steve Hatcher
***
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
overflow:auto;
padding-bottom: 50px;
} /* must be same height as the footer */
#footer {position: relative;
margin-top: -50px; /* negative value of footer height */
height: 50px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/*==========
your styles*/
body {
background-color:wheat;
}
.header {
height:25px;
background-color: lightgreen;
}
.container {
background-color: aliceblue;
padding:0;
}
.content {
padding:0 15px;
}
.footer {
background-color:lightblue;
}
关于html - 页面底部的页脚，内容在其间延伸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22853142/
27
4
0
我发现很多关于使用而不是关于定义 future 在 Dart 。假设我有 letsWait()这需要相当长的时间。如何使用 Future类(class)？ import 'dart:async'; v
有什么区别: Class和 Class ？ 谢谢 最佳答案 实际上是一样的 关于java - 反射java？延伸，我们在Stack Overflow上找到一个类似的问题： https://stacko
我想在下面的 jackson 反序列化中添加多个类。但我该怎么做呢？下面是示例代码。 XmlMapper mapper = new XmlMapper(); JaxbAnnotationModule
我正在使用 NetBeans 和 Glassfish 从现有 WSDL 构建 Web 服务。NetBeans 已从给定的 WSDL 创建了所需的类。WSDL 定义了一些基本数据类型(例如 BaseTy
我有一个获取这种类型参数的方法: NSArray 现在，当我获取此数组的一个元素时，我得到一个 ClassCastException。我的方法: public static List getWrapp
在使用泛型时，我遇到了声明 .如果我以集合接口(interface)的 addAll 方法为例。 它的声明是这样的: interface Collection { public b
我对集合中使用的通用通配符表示法有一些(违反直觉的)观察。通配符的目的 List是允许列表(T 的子类型)的赋值到“?”列表的引用的 T'。它的目的不是特别允许将 T 的子类型的元素添加到列表中( o
Closed. This question needs details or clarity。它当前不接受答案。 想改善这个问题吗？添加详细信息，并通过editing this post阐明问题。 2
你能帮我一个泛型吗？我有一个要求，我有一个 UI 表单，但根据类型，表单会完全更改。我为每种类型的表单创建了具有公共(public)字段的父 DTO 和子 DTO。使用 vaadin 进行验证。我该如
我有一个 list List generics; 我们如何对此进行排序？是否可以在 Comparator 实现上比较子类对象？ 谢谢 最佳答案 参见Collections.sort ，其中T必须imp
尝试在 android 中创建一个内存游戏而不使用 xml 布局，本质上我现在想做的是在网格上的不同位置创建两张相同的卡片。所以我在这里问的是如何将这些卡片随机放置在网格上。我首先创建了随机整数数组，
所以我得到了一个接口(interface)，其中我需要实现的一个方法为我提供了一个集合，并希望我将集合中的数据“全部添加”到我的对象中。我仍然不确定集合到底是什么。它是一个数组列表吗？我不相信它是，但
有没有办法强制最后一列延伸到 DataGrid WPF 的宽度？ 因为在某些情况下，当 DataGrid 的宽度大于所有列的累积宽度时，DataGrid 的行为就像包含最后一个空列。 public
我在对象中有一个变量: private final Map bElementsToAdd = new HashMap<>(); 使用Builder模式中的方法我想完成这个 map 。 public B
这个问题已经有答案了: Can't add value to the Java collection with wildcard generic type (4 个回答) 已关闭 9 年前。 为什么我
我的问题正是我的标题所说的。 我有以下类(class) public class StoreItem { //Lots of irrelevant information! :) }
这个问题在这里已经有了答案: Why adding an element (of correct type) into a List through a method of is a compil
我正在准备 Java 期末考试。我遇到一道题，需要填空。 需要填空的相关代码 ____ ____ C {} ____ B extends ____ , C {} 问题是:我可以插入所有这些空白来编译我
我有一个.page 围绕着里面的所有内容。当内容延伸时，.page 也会延伸。 . 我的主要问题是 .leftBannerBackground 不使用 .page 扩展. 我能做些什么来调整 .l
有时，很多次我在文档中看到这种情况。这让我想知道要输入什么。有人可以用清晰的简化文字向我解释这句话的意思吗:D。这是怎么回事: ArrayList(Collection c) 最终被用作: new A
我是一名优秀的程序员,十分优秀！