个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
经过将近六个小时的反复试验，我无法为我的问题找到解决方案 - 我以前构建过这个，但无法访问旧文件来查看我做了什么，并且一直从事不同的职业多年来的道路，不幸的是我的技能已经退色了一点。
我正在建立一个网站来记录我在海上工作的时间，它将包含:- 一个 150 像素高和 100% 宽的标题- 一个 30 像素高和 100% 宽的导航栏- 宽度为 250 像素并在导航栏和页脚之间完全延伸的旁边，无论其中的内容有多少- 一个文章 div，位于旁边的右侧，根据视口(viewport)的宽度填充剩余空间- 如果内容未填满视口(viewport)，或者如果文本超出视口(viewport)限制，则页脚至少位于页面底部，它将低于该范围。我不想要“始终可见”的页脚。
我正在使用 HTML5 和 CSS3 以及 ASP.net 4.5。
我目前的页眉、导航和文章都按照我想要的方式工作。但是，我不确定如何处理旁边和页脚。
我希望页脚位于页面底部。显然，如果我的页面上没有太多文字，它就会在浏览器屏幕的中间，而且众所周知，这看起来很业余而且很可笑。所以我希望它像普通网页一样位于屏幕底部。当我这样做的时候，我也希望我的旁边填充浏览器窗口左侧的 250px 宽 strip ，无论其中有多少内容，一直到页脚，这样它看起来更完整。
现在，正如我所指出的，在过去的六个小时里，我一直在加类加点，并在这方面取得了一些重大进展，但这两个问题我似乎无法解决。我已经使用这个论坛寻求帮助，并且几乎用尽了一切都没有成功。知道我以前在短短几分钟内做过很多次，但现在是凌晨 4 点，这让我很沮丧。
这是 CSS:
*
{
margin: 0;
}
body
{
margin: 0px auto;
height: 100%;
}
form, html
{
height: 100%;
}
header
{
margin: 0px auto;
background-color: #1041a2;
background-image: url(../Images/headerHCJ.png);
background-repeat: no-repeat;
background-position-x: right;
height: 150px;
position: relative;
}
#logo
{
margin: 0px auto;
float: left;
height: 150px;
width: 150px;
background-image: url(../Images/usmmSeal130.png);
background-repeat: no-repeat;
background-position: center;
}
#title
{
margin: 0px auto;
color: white;
position: absolute;
bottom: 45px;
padding-left: 150px;
}
#title h1
{
margin: 0px auto;
font-family: Arial;
text-shadow: 5px 5px 5px black;
}
#title h2
{
margin: 0px auto;
font-family: Arial;
text-shadow: 5px 5px 5px black;
}
nav
{
background-image: url(../Images/nav.png);
font-family: Arial;
color: white;
background-repeat: repeat-x;
height: 30px;
width: 100%;
line-height: 30px;
margin: 0px auto;
}
#content
{
margin: 0px auto;
height: 100%;
}
aside
{
margin: 180px 0px 80px 0px auto;
float: left;
width: 250px;
background-color: gray;
height: 100%;
}
article
{
margin: 0px auto;
padding-left: 250px;
min-height: 100%;
}
footer {
height:80px;
background: black;
clear: both;
}
这是我的 HTML
<body>
<form id="form1" runat="server">
<header>
<div id="logo">
</div>
<div id="title">
</div>
</header>
<nav>
</nav>
<div id="content">
<aside>
Vessel data
</aside>
<article>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</article>
</div>
<footer>
</footer>
</form>
</body>
非常感谢大家的反馈。
编辑:我非常接近解决方案。我修改了我的代码，使 aside 和 article 包含在一个 div 中，并在对 form、html 和 body 元素进行更改后将 aside 的最小高度设置为 100%。它现在扩展到 100% 的视口(viewport)，但有一个问题。它实际上是视口(viewport)高度的 100%，而不是容器 div 高度的 100%。页眉/导航栏在页面顶部占据 180px，页脚在底部占据 80px。无论视口(viewport)大小如何，页面都会滚动 240 像素。我最初的解决方法是添加边距:180px 0px 80px 0px auto。然而，这并没有解决问题。编辑上面的代码以反射(reflect)更改。
最佳答案
我创建了这个 jsfiddle .
灵感来自这个article在 css-tricks.com 上。
基本概念(HTML)
<div class="content">
Content
</div>
<footer>
I'm a footer
</footer>
CSS
html, body {
height: 100%;
}
#content {
min-height: 100%;
/* equal to footer height */
margin-bottom: -80px;
}
#content:after {
content: "";
display: block;
}
footer, #content:after {
/* .push must be the same height as footer */
height: 80px;
}
footer {
background: black;
}
对于jsFiddle本身的容器，我把
display: inline-block;
对于左边类的 aside 元素，我放了
float: left;
并保留带有正确类的 article 元素，因此它可以扩展宽度。我还为它们提供了以像素为单位的最小高度属性，而不是百分比，这样您可以在视觉上看得更清楚。
关于asp.net - 查看编辑 : CSS3 Footer sticks to bottom of the page and left column stretches to the footer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23719605/
24
4
0
好吧，这是最好用图像来解释的事情...... 我正在寻找一个类似于 StretchBlt 的函数，但我可以将图像复制到定义目标四个角的 Canvas 上，即将图像的梯形/四边形拉伸(stretch)绘
我为 UITextField 制作了一个自定义键盘，其中包含 18 个 UIButton。它是一个 UIView，被设置为文本字段的 inputView。 按钮是在 UIView 的 initWith
我想创建一个 UIButton，它使用可拉伸(stretch)图像作为背景图像，例如我可以轻松调整按钮大小以适应不同的标签等。 所以我创建了以下运行良好的代码: UIImage *bgImage =
我正在尝试拉伸(stretch) UIImageView 中的图像 - 但我惨败了:) 以下设置: 带有 View 和附加到该 View 的 UIImageView 的 NIB 文件。 使用IBOut
我一直在尝试使用 html Canvas ，但由于某种原因，很难让它不拉伸(stretch)东西。我试过只使用 screen.width 和 screen.height，但我通过使用 screen.a
我想拉伸(stretch)上图的左右两侧，并保持中间的箭头不拉伸(stretch)。我怎样才能做到这一点？ 最佳答案 如果你不喜欢打扰 Photoshop 并且图像不需要动态调整大小，你可以使用我在
我的页脚在一个容器中有四列。它需要在容器内以与上面的内容对齐。 我的问题是我想让左栏有红色背景，但目前它不会拉伸(stretch)，因为它显然在容器中。 我怎样才能将它向左拉伸(stretch)整个宽
有没有办法拉伸(stretch)按钮，使中央部分保持完整？ 9-patch 不允许这样做。 编辑:我按照 Benito 的建议使用了 9-patch。它工作正常。奇怪的是，我第一次无法得到它。 最佳答
我想拉伸(stretch)上图的左右两边，中间的箭头不拉伸(stretch)。我该怎么做？ 最佳答案 如果你不想打扰 Photoshop 并且如果图像不需要动态调整大小，你可以在 UIImage 上使
我创建了一个 9patch 图像，不知何故它只能垂直拉伸(stretch)。我尝试了其他 9-patch 图像，但它们具有相同的效果，为什么它们在其他情况下工作。所以我认为 9patch 应该没问题。
我需要在边框控件(或类似控件)中绘制一些简单的线条，这些线条始终延伸到边框的边界。有没有办法只拉伸(stretch)线条而不是它的笔？不涉及大量 C#？ 在这个版本中，线条延伸:
这是我的 XAML 及其外观:
编辑:答案将允许背景图像根据 body 的大小改变它的高度。如果正文是 500px 高，它应该是 100% 宽度，500px 高度。或 100% 宽度 2500 像素高度。 也许我错过了这件事，但我正
我有一个 UILabel。我设置了尾随和前导空间约束，还添加了对齐 Y 中心约束。我已将行数设置为零。 我的目标是将 UILabel 拉伸(stretch)到某个最大宽度，然后添加新行。在给定的约束条
我正在制作一个网站，对于该网站，我正在使用顶部的导航栏。我想要的是将栏放在页面的顶部，并且它是主页的单独颜色。这是我当前的代码: body { font-family: "Baloo Bhaina
我编写了代码来 reshape 已纹理化的四边形。当我拉伸(stretch)四边形时，图像确实按照我的预期拉伸(stretch)了。我似乎在拉伸(stretch)图像时有两个不同的三角形，图像被拉伸(
我在 div 中嵌入了 YouTube。此 div .entry-content 的 max-width 为 30em。 YouTube 嵌入我想要全窗口宽度，延伸到 #container 之外。为此
看: //UIImageView* stretchTest = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]
我有一个 super 简单的网页，由纯 HTML/CSS 组成。正如预期的那样，当我在本地运行它时，一切正常。 但是，当我部署它时(使用 Droppages，一个通过 Dropbox 的静态页面托管平
我正在尝试将一个 9 色 block 图像设置为我的一项 Activity 的背景，但它不必要地拉伸(stretch)，使一切变得奇怪。我使用 draw9patch 创建它，并在左下角添加了一个像素，
我是一名优秀的程序员,十分优秀！