个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
这是我目前正在使用的代码:http://jsfiddle.net/HMsKa/39/
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Title</title>
<link href="main2.css" rel="stylesheet" type="text/css">
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
<ul>
<li><a href="/posts/list/">Link1</a></li>
<li><a href="/posts/create/">Link 2</a></li>
<li><a href="/about">Link 3</a></li>
</ul>
</div>
<div id="main">
There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
</div>
</div>
<div id="footer">
© 2012 Company, Inc.
<ul>
<li><a href="/contact">Contact</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/terms">Terms</a></li>
<li><a href="/privacy">Privacy</a></li>
</ul>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px; /* must be same height as the footer */
overflow:auto;
background-color: purple;
}
#footer {
height: 60px;
margin-top: -60px; /* negative value of footer height */
position: relative;
clear:both;
background-color: blue;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#header {
background-color: orange;
height: 60px;
}
我正在尝试在 stackoverflow 上进行设置，其中页眉和页脚的背景一直延伸到整个页面，但页眉内容、页脚内容和主要内容位于固定宽度的列中页面的中间。在 JSFiddle 上玩了一会儿之后，我运气不太好，我确信这样做有正确和错误的方法。
有人可以告诉我实现此目标的最佳方法吗？
最佳答案
这将使您的中心列占屏幕宽度的 80%:
#main {
width: 80%;
margin: 0 auto;
}
这将使它固定在 900px:
#main {
width: 900px;
margin: 0 auto;
}
编辑:
#header {
width: 100%;
}
#header_content {
width: 900px;
margin: 0 auto;
}
#main {
width: 900px;
margin: 0 auto;
}
HTML:
<div id="header">
<div id="header_content">My header content, 900px in width</div>
</div>
<div id="main">
My main content, also 900px in width;
</div>
关于html - 页眉和页脚 100% 宽度，内容仅 900 像素宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12835002/
24
4
0
函数参数中或显示尺寸时(高度，宽度)的顺序是否有约定？ 最佳答案 我不知道大量的语言，但我使用过的语言(宽度，高度)。它更适合沿着 (x, y) 坐标线。 关于language-agnostic -
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 6 年前。 Improve th
有没有办法显示自定义宽度/高度的YouTube视频？ 最佳答案 在YouTube网站上的this link中: You can resize the player by editing the obj
如何从此表单获取数据(数据的长表示): import pandas as pd df = pd.DataFrame({ 'c0': ['A','A','B'], 'c1': ['b',
我在让宽度为 900px 的页面在宽度低于 900px 的分辨率下看起来不错时遇到了一些麻烦。这包括智能手机等移动设备。看起来我在页面上放大了，但无法滚动或缩小。我的页面包装器被定义为以屏幕为中心。这
我有一个包含一个表的 div，它有另一个带有动态变化文本的 div。div 有样式 overflow: hidden; white-space: nowrap; text-overflow: elli
我一直在愚弄下面的html代码。我已将 div id ="mainWide"设置为 2500 像素的宽度，这比我的屏幕还宽，我希望在主浏览器窗口中有一个水平滚动条，而不是在 div block 本身中
当我的屏幕浏览器窗口在 992px-1199px 之间时，我的文章元素比它们的父 div (.wrapper) 更宽。所以在这个屏幕宽度下，面板重叠并且看起来不对。 在所有其他屏幕宽度下，我的代码都准
我在对齐某些行时遇到了一些问题。我正在显示一个占据视口(viewport) 100% 高度的部分。因此，当您在屏幕上查看此部分时，您只会看到此部分。 在这个部分中，我有一个标题和副标题。标题应显示在节
为什么表单输入字段比其父 div 宽？宽度应用于文本 div，但不应用于其中包含表单字段的 div。为什么会这样？ See the livecode here. .parent { width:
我想让这个标题 100% 宽。我在 jsfiddle 上试过这个，但是左边和右边还有一些余量。 CSS: #header { background: url("../img/top-bg.png
我的页面宽度有问题。无论我尝试什么，它的左边或右边都有白边(默认情况下在右边，如果我使用 margin-right:0 则在左边)。如果我使用 margin:0 比它留在右边。尝试了我所知道的一切，但
我有一个带有背景图片的宽 div。 div 的宽度为 1100 像素，当浏览器窗口小于该宽度时，会出现滚动条。有什么办法可以避免滚动条吗？那不是任何黑客。现在我知道我可以把它放在 body image
我有一个您可以访问的应用程序 here .当您打开应用程序时，只需单击加号按钮，您就会看到一个带有搜索栏的模态窗口。 现在请执行这两个搜索: 搜索 1:AAA 搜索 2:AAE 您会看到，在 AAE
这个问题在这里已经有了答案: Does element width include padding? (5 个答案) 关闭 7 年前。 HTML CSS .wrap{widt
我正在尝试在工具栏中创建一个自定义显示，类似于 Xcode 工具栏中心的信息 Pane 。 我们如何创建一个宽度超过 32 点的 NSToolbarItem？ 框架始终将其限制为 32 点，即使最小和
我想将df1转换成df2 旧示例数据框 df1 df1 长)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/359
我正在使用 JavaScript 代码在 FireBase/FireStore 中上传图像。 核心功能已经可以运行，我可以上传，但我还需要在上传之前检查图像的大小。这就是我很乐意获得帮助的地方。 以下
如何在 Tkinter 中设置/更改 ttk.Separator 对象的长度/宽度？ ttk.Separator(self, orient='horizontal').grid(c
我有一个简单的问题。为什么 a 不会自动调整其内容的大小？像这样: Test 返回 width:100%，尽管我希望“Test”这个词简单地居中。有什么想法吗？ 最佳答案 您的问题与 HT
我是一名优秀的程序员,十分优秀！